Rendering graph in canvas js using external json data

Question

I am trying to render graphs using canvas.js. The charts need to be rendered from an external JSON source, which is hosted at this website

http://gsx2json.com/api?id=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats

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.

Try using let i instead of var i in your for loop declaration — Per Digesen
– Per Digesen, Commented Feb 4, 2019 at 23:11

Vishwas R · Accepted Answer · 2019-02-06 05:12:24Z

1

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.

function addData(data) {
  for (var i = 0; i < data.columns["timestamp"].length; i++) {
    dataPoints.push({
      x: new Date(data.columns["timestamp"][i]),
      y: data.columns["latitude"][i]
    });
  }
  chart.render();
}

$.getJSON("https://api.myjson.com/bins/1eqjac", addData); //JSON has been stored in myjson.com due to CORS.

Here is the working JSFiddle

answered Feb 6, 2019 at 5:12

Vishwas R

3,4301 gold badge20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NoobHacker Over a year ago

Thanks for this! After this part got working , had to figure out a way so that CORS does not interfere. But really helpful solution!

Twisty · Accepted Answer · 2019-02-05 05:49:39Z

0

I would advise something like the following.

$(function(){
  var points = [];

  $.getJSON("http://gsx2json.com/api?id=1vc7wCjNXK39HMEYDkOJRMhQGPJpxMu4MJgTsydyLats&columns=false", function(d){
    $.each(d.rows, function(i, r){
      points.push({
        x: new Date(r.timestamp),
        y: r.latitude
      });
    });
  }).fail(function(xhr, status, error) {
    console.log("Ajax Error", status, error);
  });

  var chart = new CanvasJS.Chart("chartContainer", {
    type: "line",
    data: [{
      dataPoints: points
    }]
  });
  chart.render();
});

This may encounter problems due to CORS.

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

If this is the case, can try with $.ajax() and set dataType set to jsonp. Can also move to fetch() alternative.

Looking at the data returned, using rows might be easier, since you want the corresponding timestamp and latitude. The columns make this more difficult; you would have ti iterate both columns.timestamp array at the same time as columns.latitude array. Hence the &columns=false portion to the URL to help reduce data that needs to be passed back.

Hope this helps.

edited Feb 5, 2019 at 5:49

answered Feb 5, 2019 at 5:39

Twisty

31k2 gold badges30 silver badges50 bronze badges

2 Comments

NoobHacker Over a year ago

Thank you. Your post helped me figure out the way to bypass CORS. I did use fetch as an alternative. As the person above wrote it'll be data.columns["timestamp][i] to read innermost json.

Twisty Over a year ago

@gatata glad it's been helpful for you. I hope you consider upvoting the post and mark it as the answer.

Collectives™ on Stack Overflow

Rendering graph in canvas js using external json data

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related