score:11

Accepted answer

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:

score:0

I ran into the same issue. I changed the y() function on the lines from

.y(function(d) { return d.display.y })

to

.y(function(d) { return d.display ? d.display.y : d.y })

This gets rid of the error. Obviously it won't be displaying the (non-existent) indexed value in the error case, but in my experience, the chart gets updated again with display defined, and it looks correct.

score:1

I found what I think is a better solution. The problem occurs because the cumulative chart sets the y function during processing. Whenever your want to refresh the chart, first set it back to a default which returns the correct original y. In your redraw function do this before updating:

chart.y(function (d) { return d.y; });

Even better would be if the cumulative chart could do this for itself (store the original access function before setting the new one, and put it back before re-indexing). If I get a chance, I'll try to push a fix.


Related Query

More Query from same tag