Search code examples
socket.iosails.jsnvd3.jsangular-nvd3

nvd3 candlestick chart not displaying custom data


I have a nvd3 angular candlestick chart that displays hardcoded data just fine. But when I point it another data source (socket.io), it doesn't display anymore.

I get my data from a socket here

 $scope.getdata = function () {
    console.log("getting data!");
    io.socket.get('/feed/getpolodata', function (data, jwr, err) {
        var values = [];
        angular.forEach(data.candleInfo, function (r) {
            //$scope.data
            values.push({

                "date": r.date,
                "close": r.close,
                "open": r.open,
                "high": r.high,
                "low": r.low,
                "volume": r.volume,
                "adjusted": r.low

            });

            if (err) {
                console.log("Error getting data")
            }
        });

        $scope.data.push({values});

        console.log("js" + JSON.stringify($scope.data));
        console.log("js2" + JSON.stringify($scope.data2));
    })
};

$scope.data contains the custom data and $scope.data contains hardcoded data for testing.

data2:

    $scope.data2 = [{
    values: [
        { "date": 1499031328, "close": 0.00008231, "open": 0.0000816, "high": 0.00008267, "low": 0.0000816, "volume": 12.09695909596307, "adjusted": 0.0000816 },
        { "date": 1499031388, "close": 0.00008303, "open": 0.000083, "high": 0.0000837, "low": 0.00008294, "volume": 10.91308942290992, "adjusted": 0.00008294 }
    ]
}]

When I point my graph's data value to data2, it works perfectly. However nothing is displayed when i point to $scope.data.

EDIT: Here's the result of the console.log

js[{"values":[{"date":1499034558,"close":0.00008388,"open":0.0000848,"high":0.0000848,"low":0.00008388,"volume":0.8672647004639618,"adjusted":0.00008388},{"date":1499034618,"close":0.00008405,"open":0.00008388,"high":0.00008574,"low":0.00008388,"volume":16.091108890994363,"adjusted":0.00008388},{"date":1499034678,"close":0.0000843,"open":0.00008405,"high":0.00008574,"low":0.00008388,"volume":2.3125435626714554,"adjusted":0.00008388},{"date":1499034738,"close":0.0000845,"open":0.0000843,"high":0.00008574,"low":0.00008388,"volume":0.012429811837685201,"adjusted":0.00008388}]}]
js2[{"values":[{"date":1499031328,"close":0.00008231,"open":0.0000816,"high":0.00008267,"low":0.0000816,"volume":12.09695909596307,"adjusted":0.0000816},{"date":1499031388,"close":0.00008303,"open":0.000083,"high":0.0000837,"low":0.00008294,"volume":10.91308942290992,"adjusted":0.00008294}]}]

Solution

  • Solved it by adding

            $scope.$apply();
            $scope.api.refresh();
    

    Right after the console.logs

    Works perfectly