Search code examples
javascriptcanvasjs

How to plot date format in x-axis using Javascript and data from JSON

I am trying to plot Concentration of CO2 vs Date from a JSON file that has this kind of date format:

For a point in the x-axis:

"ts": "2020-07-03T12:00:00.000Z",

and for a point in the y-axis

"co_sum": 424.5,

So I managed to plot it if I use "i" instead of date from an array, but I can't manage to plot the date using CanvasJS. How can one convert that data format into something that can be plotted on the x-axis. Basically, instead of i, some kind of date format.

$.getJSON("somejsonsite.json", function(data) {
  $.each(data, function(key, value) {


    for (var i = 0; i - 1 < data.length; i++) {
      dataPoints1.push({
        x: i,
        y: data[i].co_sum
      });
    }
  });
  chart.render();

});

This is what I get now: enter image description here

Solution

  • It's not very clear what date pattern you exactly want but here I have used whatever the value of i happens to be to offset the current datetime value by that many seconds

    for (var i = 0; i - 1 < data.length; i++) {
  dataPoints1.push({
    x: new Date(Date.now()+ (i*1000)),
    y: data[i].co_sum
  });
}

    UPDATE

    So just change x: new Date(Date.now()+ (i*1000)), to x: new Date(data[i].ts),

    The Date constructor will parse and convert to date object automatically