title: CanvasJS line chart generation?
body: <p>I am busy trying to make a javascript chart for real-time data display. I found this CanvasJS API. The default code for that <a href="http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/dynamic/realtime_line/" rel="nofollow">specific chart</a> on their webpage is nice, but of course the part where they get the data, they have left the variable array empty and used a math randomize data function instead, in order that specific data will be randomly generated and used in the graph.</p>
  
  <p>However I would like to full that array with my database data coming from a specific table I would like to use!</p>
  
  <p><strong><em>I have tried many things but if I implement my part, the graph won't display anymore. What am I doing wrong?</em></strong></p>
  
  <p>Here are the 3 codes I use:</p>
  
  <p><strong>The default code (just for comparison purpose):</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript"&gt;
      window.onload = function () {
  
          var dps = []; // dataPoints
  
          var chart = new CanvasJS.Chart("chartContainer",{
              title :{
                  text: "Live Random Data"
              },          
              data: [{
                  type: "line",
                  dataPoints: dps 
              }]
          });
  
          var xVal = 0;
          var yVal = 100; 
          var updateInterval = 20;
          var dataLength = 500; // number of dataPoints visible at any point
  
          var updateChart = function (count) {
              count = count || 1;
              // count is number of times loop runs to generate random dataPoints.
  
              for (var j = 0; j &lt; count; j++) {   
                  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                  dps.push({
                      x: xVal,
                      y: yVal
                  });
                  xVal++;
              };
              if (dps.length &gt; dataLength)
              {
                  dps.shift();                
              }
  
              chart.render();     
  
          };
  
          // generates first set of dataPoints
          updateChart(dataLength); 
  
          // update chart after specified time. 
          setInterval(function(){updateChart()}, updateInterval); 
  
      }
      &lt;/script&gt;
      &lt;script type="text/javascript" src="/assets/script/canvasjs.min.js"&gt;&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>My own chart-code, based on the above code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.canvasjs.js" &gt;&lt;/script&gt;
      &lt;script src="canvasjs.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $.getJSON("data.php", function (result) {
  
                  var chart = new CanvasJS.Chart("chartContainer", {
                      data: [
                          {
                              dataPoints: result
                          }
                      ]
                  });
  
                  chart.render();
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="chartContainer" style="width: 800px; height: 380px;"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>and my data.php</strong> which displays the following output:</p>
  
  <blockquote>
    <p>[{"x":"1","y":"5"},{"x":"2","y":"5"},{"x":"3","y":"4"},{"x":"4","y":"1"},{"x":"5","y":"8"},{"x":"6","y":"9"},{"x":"7","y":"5"},{"x":"8","y":"6"},{"x":"9","y":"4"},{"x":"10","y":"7"}]</p>
  </blockquote>
  
  <pre><code> &lt;?php
      //header('Content-Type: application/json');
      $con = mysqli_connect("localhost","root","","WebApplication");
  
      // Check connection
      if (mysqli_connect_errno($con))
      {
          echo "Failed to connect to DataBase: " . mysqli_connect_error();
      } 
      else
      {
      $data_points = array();
  
      $result = mysqli_query($con, "SELECT * FROM info");
  
      while($row = mysqli_fetch_array($result))
      {        
          $point = array("x" =&gt; $row['id'] , "y" =&gt; $row['acceleration']);
  
          array_push($data_points, $point);        
      }
  
          echo json_encode($data_points, 32); //define('JSON_NUMERIC_CHECK',32);   // Since PHP 5.3.3
  
      }
      mysqli_close($con);
  
  
  
      ?&gt;
  </code></pre>
  
  <p>Hopefully you have enough info!</p>
  
  <p>Thank you</p>
  
  <p>Mieer</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I swapped the code from 'my own chart' -code for the following, based on @feedback-comment from: <em>Anjali Jain</em></p>
  
  <p>--></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.canvasjs.js" &gt;&lt;/script&gt;
      &lt;script src="canvasjs.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="canvasjs.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
                  $.getJSON("data.php", function (result) {
  
                  var dataPoints = [];
  
                  for (var i = 0; i &lt;= result.length - 1; i++) {
                  dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
                  }
  
                  var chart = new CanvasJS.Chart("chartContainer", {
                  data: [
                  {
                  dataPoints: dataPoints
                  }
                  ]
                  });
  
                  chart.render();
                  });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="chartContainer" style="width: 800px; height: 380px;"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Yet, I still get nothing. </p>