CODEWITHSUNDEEP
javascriptmeteorchartsnvd3.js
mayvn
mayvn

Reputation: 191

nvd3 Line Chart Not Drawing w/ Correct Data

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:

enter image description here

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

Upvotes: 0

Views: 763

Answers (1)

Lucas
Lucas

Reputation: 1389

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

Upvotes: 1

Related Questions