render graphs from external json source

[gautamtata]

I need to render some graphs that use JSON. The charts need to be rendered from an external JSON source, which is hosted at this website

JSON_hosted_website

The objective is to, graph a chart from 2 values in the JSON data (ie example, timestamp vs latitude)

This is the code, which I have so far:

 $.getJSON("http://gsx2json.com/apiid=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats", function addData(data){

for (var i = 0; i < data.length; i++) {

    dataPoints.push({
        x: new Date(data[i].columns["timestamp"]),
        y: data[i].columns["latitude"]
    });
}

chart.render();

 // console.log(data.columns["timestamp"])

});

I am using the for loop to iterate thru the JSON object and then using JSON keys to access the data.

The data doesn’t render, when I run this code. But, when I try to console.log (data.columns[“latitude”]) outside the for-loop, I am able to access the data which I need.

Any help is much appreciated.

Thanks.

[Vishwas R]

@gautamtata,

The data doesn’t render, when I run this code. But, when I try to console.log (data.columns[“latitude”]) outside the for-loop, I am able to access the data which I need.

You are consoling data.columns[“latitude”] which is getting consoled whereas while parsing you are considering it as data[i].columns[“latitude”] which should ideally be data.columns[“latitude”][i]. Parsing the data received from JSON accordingly should work fine in this case. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[gautamtata]

Thank you. That was really helpful and solved my problem!
Appreciate your help and quick response!