How to add JSON data to nvd3 charts

Question

I am new to Javascript and couldn't find error in my code. I am using NVD3 charts here. It is a time series based chart with date and closing prices of a particular stock. Data ranges from 2005 till now.

Here is the code

var data= JSON.parse("Data.JSON")

nv.addGraph(function() {
 var chart = nv.models.lineChart()
              .margin({top: 70, right: 70, bottom: 70, left: 70})  
              .useInteractiveGuideline(true)  
              .transitionDuration(100)  
              .showYAxis(true)
              .showXAxis(true)
;
 //Chart x-axis settings
chart.xAxis  
    .axisLabel('date')
    .tickFormat(function(d) {return new Date((data.Date - (25567 + 1))*86400*1000);

chart.yAxis     //Chart y-axis settings
    .axisLabel('close')
    .tickFormat(d3.scale.linear(data.Close));




d3.select('#Charts svg')    //Selecting the <svg> element where i want to render the chart in.   
    .datum(data)         //Populating the <svg> element with chart data...
    .call(chart);          //Finally, rendering the chart!

//Update the chart when window resizes.

  })

;

//Data { "Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110] "Close": [ 2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8] }

And what is the problem that you are experiencing? – Adam Michalik Nov 03 '15 at 13:57 — Adam Michalik, Nov 03 '15 at 13:57
Code is not running. Nothing is being formed. – Vishu kapoor Nov 03 '15 at 14:24 — Vishu kapoor, Nov 03 '15 at 14:24

score 2 · Accepted Answer · answered Nov 03 '15 at 22:34

The number of array elements in "Close" are less compared to "Date".

Here is a possible solution that you might be looking for:

    nv.addGraph(function () {
    var chart = nv.models.lineChart();

    chart.xAxis.axisLabel('date')
        .tickFormat(d3.format(''));

    chart.yAxis.axisLabel('close')
        .tickFormat(d3.format(''));

    d3.select('#dateChart')
        .datum(chartData())
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(function () {
        d3.select('#dateChart').call(chart)
    });

    return chart;
});


function chartData() {
    var myData = {
        "Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110],
        "Close": [2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8, 2588.8]
        //The number of array elements in Close were less compared to Date. Hence added 2588.8 as the last element
    };

    var result = [];
    for (var i = 0; i < myData.Date.length; i++) {
        result.push({
            x: myData.Date[i],
            y: myData.Close[i]
        });
    }

    return [{
        values: result,
        key: 'Date Chart',
        color: '#ff7f0e'
    }];
}

JS Fiddle: https://jsfiddle.net/m7oaxjue/3/

Thanks for the answer. Can you tell me how to add my data, which is in JSON file to the chart. Also i need to change these dates into %d-%m-%Y format. — Vishu kapoor, Nov 04 '15 at 06:26
@Vishukapoor: You can save your json data in a file and then access it in your code, or you can create a backend web-service endpoint that exposes json data. You can then call this api in you app. Here is an example for access json data from a file: http://plnkr.co/edit/PTiH0GqfknsZG6gtNhnU?p=preview — Gourav Anvekar, Nov 04 '15 at 18:30
@gaura can't i just copy and paste the code from plnkr and use it? Code works good with different data set on plnkr but not when i am using it on my system. — Vishu kapoor, Nov 07 '15 at 04:49
You need to run your app on a local webserver or use an IDE that runs your app on a temp server (Eg. Visual Studio, Webstorm, IntelliJ etc.). This could be a helpful resource http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript — Gourav Anvekar, Nov 09 '15 at 14:30

How to add JSON data to nvd3 charts

1 Answers1