nvd3 candlestick chart not displaying custom data

Question

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}]}]

The new text result is different from what you had in your initial picture. Does that mean it works now, or is the error different? — Hugues M., Jul 02 '17 at 18:39
Sorry the old picture was not updated. The text console is the most recent one and is still not working — Kenny Nguyen, Jul 02 '17 at 18:40
OK, the code that you shared does not show where you pass the data to nvd3. Do you draw the graph *after* receiving the data? — Hugues M., Jul 02 '17 at 18:54
OK that's probably the problem, you need to update after. If you have trouble with that, please update the question. — Hugues M., Jul 02 '17 at 18:56
I added `$scope.$apply();` to update, but nothing appeared. I also move the graph-drawing after receiving data and still no go — Kenny Nguyen, Jul 02 '17 at 19:03
Might want to check [this](https://stackoverflow.com/q/30693747/6730571). Also, it seems the code you shared is not in sync with the results you shared. If you're still adjusting, please update the question when ready, with consistent info. — Hugues M., Jul 02 '17 at 19:15
Im aware of that, the data is being pull from an api on page refresh everytime — Kenny Nguyen, Jul 02 '17 at 19:21

score 0 · Accepted Answer · answered Jul 02 '17 at 20:59

0

Solved it by adding

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

Right after the console.logs

Works perfectly

answered Jul 02 '17 at 20:59

Kenny Nguyen

222
2
13

nvd3 candlestick chart not displaying custom data

1 Answers1