title: CanvasJS: Making a chart dynamic with data.php, json encode and ajax(bandwidth meters)
body: <p>First things first, I am trying to parse the data from a data.php file that uses json encode to echo a datapoint. The datapoint is updated every time the data.php file is requested, but not in a series of datapoints. Instead it just changes the time value and refreshes its y content. I haven't found a working way to actually make the php file echo series of datapoints and not update a single one.</p>
  
  <p>Next up, the chart parses the data.php file and it indeed shows the datapoint. BUT I want to make this chart update every second and add new datapoints on every update so that I have a working bandwidth graph.</p>
  
  <p>Here is my code: </p>
  
  <p><strong>index.php:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;  
  &lt;script type="text/javascript" src="canvasjs.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(document).ready(function () {
  $.getJSON("data.php", function (data_points) {
      var dps = data_points
  var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  panEnabled: true,
  animateEnabled: true,
  data: [ {
  type: "splineArea",
  xValueType: "label",
  y: "y",
  dataPoints: dps } ]
  });
  chart.render();
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chartContainer" style="height: 300px; width: 100%;"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>data.php:</strong></p>
  
  <pre><code>&lt;?
  
  session_start();
  session_destroy();
  session_start();
  
  $rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
  sleep(1);
  $rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
  
  $rbps = $rx[1] - $rx[0];
  
  $round_rx=round($rbps/1, 2);
  
  $time=date("Y-m-d H:i:s");
  $_SESSION['rx'] = $round_rx;
  $data_points['label'] = $time;
  $data_points['y'] = $_SESSION['rx'];
  
  echo json_encode([$data_points]);
  
  ?&gt;
  </code></pre>
  
  <p>If anyone know on how to make this map dynamic then please provide me some help.
  An example output of the data.php file (what it echoes) is the following:</p>
  
  <pre><code>[{"label":"2015-09-12 21:34:12","y":1500}]
  </code></pre>
  
  <p>Thank you in advance for any help provided.</p>