nvd3 Line Chart Not Drawing w/ Correct Data

Question

I'm currently trying to render an nvd3 Line Chart in Meteor JS. I'm running Meteor 1.1.0.3 and running the nvd3 package on version 1.7.1.

Using the examples on the nvd3: http://nvd3.org/examples/line.html, I got the following code. However, even with correctly following the example, the graph draws but the dates are all 12/31/1969 and the y axis generates -1, 0, and 1 values. See the attached image:

Can anyone tell me what I'm missing here?

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .margin({ left: 25 })
        .showLegend(true)
        .showXAxis(true)
        .showYAxis(true);

    chart.xAxis
        .axisLabel('Date')
        .tickFormat(function(d) { 
            return d3.time.format('%x')(new Date(d));
        });

    chart.yAxis
        .axisLabel('Data')
        .tickFormat(d3.format('d'));

    d3.select('#data-chart svg').datum(formattedData).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

formattedData = [
{
    key: 'Data', //key  - the name of the series.
    values: [{ date: 1439963723311, total: 3}, { date: 1441283002275, total: 1}, { date: 1441194849210, total: 2}], //values - represents the array of {x,y} data points
    color: '#ff0000' //color - optional: choose your own line color.
}
];

Lucas · Accepted Answer · 2015-09-07T05:54:22.427

1

You need to tell D3 how to access the data—what is x and what is y.

(The example on the NVD3 site already has the keys as 'x' and 'y')

Try adding the accessor functions:

    var chart = nv.models.lineChart()
        .x(function (d) { return d.date })
        .y(function (d) { return d.total })

and if you want to make sure the y-axis starts at 0, include

        .forceY([0]);

Also, you need to make sure to sort your data beforehand (the last two items are out of order).

See this Plunk for a live example: http://plnkr.co/edit/QjcEXIIQ5aIhuFhpRwsj?p=preview

edited Sep 07 '15 at 05:54

answered Sep 07 '15 at 05:43

Lucas

1,359
7
16

perfect! I also tried a different way where I completely replaced "date" with "x" and "total" with "y" and it worked. one last additional question - how do you format the ticks so it's 1 date per tick? right now, it's rendering with 2 day intervals ("8/19/15 - 8/21/15" etc). thanks again. – mayvn Sep 07 '15 at 11:55
Check out this answer: http://stackoverflow.com/questions/29967173/how-to-make-xaxis-hourly-tickslike-0-1-2-23-in-stackedarechart-use-nvd3-js/30066232#30066232 – Lucas Sep 07 '15 at 17:58
@Lucus this would be a sufficient answer but the format of the date is only populated into the data array if it has a value other than 0 in it's corresponding "total" key. this means that if there was 3 total on 9/7/15, 0 on 9/8/15, and 2 on 9/9/15 - it skips the 9/8 and only populates the other 2 on the graph. is there a JS / nvs3 way to populate missing dates with a default value of 0? – mayvn Sep 07 '15 at 18:55

nvd3 Line Chart Not Drawing w/ Correct Data

1 Answers1