JSON and the Line Chart

• June 28, 2013 at 1:03 am #4779
  
  jwhazel

  I’m trying to dynamically import all of the chart data from a server side JSON file using jQuery. Here is my properly formatted JSON file (I’ve checked it with a validator):

  {
     "axisY":{
        "title":"By Percentage"
     },
     "colorSet":"greenshades",
     "backgroundColor":"#2c2d2d",
     "data":[
        {
           "type":"line",
           "dataPoints":[
              {
                 "x":"new Date(2013, 04, 1)",
                 "y":3.31,
                 "markerColor":"#588F27"
              },
              {
                 "x":"new Date(2013, 04, 7)",
                 "y":4.55,
                 "markerColor":"#588F27"
              },
              {
                 "x":"new Date(2013, 04, 14)",
                 "y":6.88,
                 "markerColor":"red"
              },
              {
                 "x":"new Date(2013, 04, 21)",
                 "y":3.42,
                 "markerColor":"#588F27"
              },
              {
                 "x":"new Date(2013, 04, 29)",
                 "y":5.15,
                 "markerColor":"red"
              },
              {
                 "x":"new Date(2013, 05, 5)",
                 "y":3.34,
                 "markerColor":"#588F27"
              }
           ]
        }
     ]
  }

  Notice how the x coordinate new Date(yyddmm) has to be encapsulated in quotes to be valid. But it seems canvasjs’s parser doesn’t pick up on it. That is the above JSON will render the chart properly but without any data points plotted. Not encapsulating it will cause $getJSON to fail silently and no chart is drawn. Do you have any recommendation on a way around this?

  June 28, 2013 at 3:20 pm #4782
  
  Sunil Urs

  Hi,

  JSON doesn’t have a standard way to specify date objects.

  Best way is to send timestamp values instead. CanvasJS accepts timestamp values when xValueType property is set to “dataTime” as shown here.

  You can also use any of the custom formats and parse them on the client side before assigning it to the chart.

  —
  Sunil Urs

  September 2, 2017 at 2:41 pm #15960
  
  njhelloworld

  I am really new to canvasjs I need to create a running line chart based on data from database. What I did is something like this, error comes like Uncaught ReferenceError: $ is not defined at window.onload (livechart.php:7). Always shows.. Please help me with this..Thank you so much for any reply

  window.onload = function () {
          $.getJSON("www.website.com/livedata.php", function(result){
          var dps = []; // dataPoints
          var chart = new CanvasJS.Chart("chartContainer",{
              zoomEnabled:true,
              panEnabled:true,
              animationEnabled:true,
              title :{
                  text: "Analysis for Soil Ph",
                  fontSize: 20
              },          
              data: [{
                  type: "line",
                  dataPoints: dps 
              }]
          });
          var xVal = 0;
          var yVal = 100; 
          var updateInterval = 100;
          var dataLength = 500; // number of dataPoints visible at any point
         var updateChart = function (count) {
              count = count || 1;     
              for (var j = 0; j < count; j++) {   
                  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                  dps.push({
                      x: xVal,
                      y: yVal
                  });
                  xVal++;
              };
              if (dps.length > dataLength)
              {
                  dps.shift();                
              }
              
              chart.render();     
  
          };
          updateChart(dataLength); 
          setInterval(function(){updateChart()}, updateInterval); 
  
  });
      }

  September 4, 2017 at 9:49 am #15963
  
  Indranil

  @njhelloworld,

  Kindly make sure that jQuery is included in the code.

  ____________
  Indranil Deo,
  Team CanvasJS