Invalid value for <circle> attribute cx="NaN" using NVD3.js

Question

i get an 'Invalid value for attribute cx="NaN"' when using barlinechart with nvd3.js. the chart gets displayed but the yAxis shows wrong integer values (too low) and the tooltips on the chart do not pop up on hovering it. input data is listed below.

resulting chart

js part:

function drawCumulativeChart(selector, jsondata ){

    nv.addGraph(function() {
        var chart = nv.models.cumulativeLineChart()
                        .x(function(d) { return d[0] })
                        .y(function(d) { return d[1] })
                        .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function (d) {
            return d3.time.format("%m/%y")(new Date(d));
        });

        chart.yAxis.tickFormat(d3.format(',.2f'));

        d3.select(selector)
            .datum( **jsondata** ) 
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    }); 
}

jsondata:

[{
    "key":"usercount",
    "values":[
        ["2011-12-31T23:00:00.000Z",22],
        ["2012-01-31T23:00:00.000Z",45],
        ["2012-02-29T23:00:00.000Z",64],
        ["2012-03-31T22:00:00.000Z",86],
        ["2012-04-30T22:00:00.000Z",109],
        ["2012-05-31T22:00:00.000Z",123],
        ["2012-06-30T22:00:00.000Z",145],
        ["2012-07-31T22:00:00.000Z",174],
        ["2012-08-31T22:00:00.000Z",195],
        ["2012-09-30T22:00:00.000Z",207],
        ["2012-10-31T23:00:00.000Z",221],
        ["2012-11-30T23:00:00.000Z",235]
    ]
}]

database raw dataformat:

[time:2012-01-01 00:00:00.0, count:2]

Here is a sample set of data for the cumulative chart , Check your data that you pass into the chart. — shabeer90

Dem Pilafian Dem Pilafian · Accepted Answer · 2013-06-20T19:17:53

The data for x should be a universal time integer (rather than a date string). See: getTime()

I ran into the same problem on my project and tried doing the conversion in the x function, by changing

   .x(function(d) { return d[0] })

to:

   .x(function(d) { return d3.time.format("%Y-%m").parse(d[0]); })

The chart displayed but still generated the NaN you encountered. After lots of debugging, I just changed my REST response to return JSON data with universal time integers and now everything works fine.

Your charts should be fine if you get your data to look like:

[{
   "key": "usercount",
   "values": [
      [1325372400000, 22],
      [1328050800000, 45]
   ]
}]

From the JavaScript console, you can test:

> new Date("2011-12-31T23:00:00.000Z").getTime();
> 1325372400000

Invalid value for <circle> attribute cx="NaN" using NVD3.js

2 Answers