Home forums Using CanvasJS render graphs from external json source

This topic contains 2 replies, has 2 voices, and was last updated by  gautamtata 5 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24208

    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.

    #24215

    @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

    #24269

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.