NVD3 line chart with realtime data-open source projects novus/nvd3
Second Answer (after comment)
I looked at source for cumulativeLineChart. You can see the display.y property get created during chart creation. It relies on a private method: “indexify”. If some derivative of that method was made public, then perhaps you could do something like chart.reindexify() before redrawing.
As a temporary workaround, you could recreate the chart from scratch on every update. If you remove the transition, that seems to work okay. Example jsfiddle: http://jsfiddle.net/kaliatech/PGyKF/.
First Answer
I believe there is bug in cumulativeLineChart. It appears that the cumulativeLineChart adds a “display.y” property dynamically to data values in the series. However, it does not regenerate this property when new values are added to the series for a redraw. I don’t know of anyway to make it do this, although I’m new to NVD3.
Do you really need a CumulativeLineChart, or would a normal line chart be sufficient? If so, I had to make the following changes to your code:
- Change from cumulativeLineChart to lineChart
- Change from using 2 dimension arrays of data, to using objects of data (with x,y properties)
- (I’m not familiar enough with NVD3 to say what data formats is expects. The 2D array obviously works for initial loads, but I think it fails to work for subsequent redraws. This is likely related to the same issue you are having with cumulativeLineChart. I thought changing to objects would fix cumulativeLineChart as well, but it didn’t seem to.)
I also changed the following, although not as important:
-
Modified your getData function to create a new instance of Date to avoid unexpected consequences of sharing a reference as the date gets incremented.
-
Modified the update interval function to generate new data in increments of days (not months) with y values in the same range as the getData function.
Here’s a working jsfiddle with those changes:
- http://jsfiddle.net/kaliatech/4TMMD/