interesting issue using jquery getJSON

• January 21, 2015 at 9:32 am #8043
  
  Phildo

  Hi all, struggling to see where i’m going wrong here, having adapted the example from HERE. I see identical format when i console.log(data), so unsure sure why there is no chart.

  Code I’m using:

  <script type="text/javascript">
  
  window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer",
          {
                  zoomEnabled: true,
                  animationEnabled: true,
                  title:{
                          text: "100,000 Data Points! Zoom-in And Observe Axis Labels"
                  },
                  axisX :{
                          labelAngle: -30
                  },
                  axisY :{
                          includeZero:false
                  },
                  data: data
          });
          chart.render();
  }
  
  var data = [];
  var dataSeries = { type: "line" };
  var dataPoints = [];
  (function () {
          $.getJSON('boop.little.json',
                  function(thedata) {
                          $.each(thedata, function(i, v) {
                                  dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) });
                          });
                  }
          )
  })();
  
  dataSeries.dataPoints = dataPoints;
  data.push(dataSeries);
  
  //console.log(data);
  
  </script>

  JSON file source I’m using:

  [
      {
          "Datetime": "01/01/2012 00:00:01",
          "Value": "0.48"
      },
      {
          "Datetime": "01/01/2012 00:10:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 00:20:01",
          "Value": "0.48"
      },
      {
          "Datetime": "01/01/2012 00:30:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 00:40:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 00:50:01",
          "Value": "0.47"
      },
      {
          "Datetime": "01/01/2012 01:00:01",
          "Value": "1.23"
      },
      {
          "Datetime": "01/01/2012 01:10:01",
          "Value": "2.09"
      },
      {
          "Datetime": "01/01/2012 01:20:01",
          "Value": "2.08"
      },
      {
          "Datetime": "01/01/2012 01:30:01",
          "Value": "2.64"
      },
      {
          "Datetime": "01/01/2012 01:40:01",
          "Value": "2.91"
      },
      {
          "Datetime": "01/01/2012 01:50:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 02:00:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 02:10:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 02:20:01",
          "Value": "0.53"
      },
      {
          "Datetime": "01/01/2012 02:30:01",
          "Value": "0.51"
      }
  ]

  Cheers,

  -Phil

  February 23, 2015 at 1:27 am #8246
  
  jibion

  Hi Phil,

  did you solve this? I am getting the exact same problem, however my chart is from bar type, so I changed x: for label: (I don’t know if this is necesary, but at least so is data pushed in the examples)

  Cheers,
  Agustín

  February 23, 2015 at 12:22 pm #8247
  
  Sunil Urs

  Hi,

  Looks like you are calling chart.render() even before the data is pushed into dataPoints – ajax requests take time to return before which the onload event handler is called.

  Instead you can do something like

  function(thedata) {
      $.each(thedata, function(i, v) {
          dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) });
      });
      chart.render();
  }

  —
  Sunil Urs