title: dynamic highcharts with json data
body: <p>I m trying to figure it out that is it possible to make the json data fetched dynamically from a database with the help of php and mysql and can be plotted with highcharts that too dynamic auto updating? Any help would be appreciated. </p>
  
  <p>following the code i have tried and is not working properly and want to implement to the the website for 10 lines.</p>
  
  <pre><code>    &lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;highchart example&lt;/TITLE&gt;
  &lt;script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
  
  
  var chart;
  
   function requestData() {
      $.ajax({
          url: 'live-server-data.php',
          success: function(point) {
              var series = chart.series[0],
                  shift = series.data.length &gt; 20; // shift if the series is 
                                                   // longer than 2
              // add the point
              chart.series[0].addPoint(point, true, shift);
  
              // call it again after one second
              setTimeout(requestData1, 1000);    
          },
          cache: false,
  
      });
  
  }
  
   function requestData1() {
      $.ajax({
          url: 'live-server-data.php',
          success: function(point) {
              var series2 = chart.series[1],
                  shift = series2.data.length &gt; 20; // shift if the series is 
                                                   // longer than 20
  
              // add the point
              chart.series[1].addPoint(point, true, shift);
  
              // call it again after one second
              setTimeout(requestData, 1000);    
          },
          cache: false,
  
      });
  }
  
  
  $(function () {
      $(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              defaultSeriesType: 'spline',
              events: {
                  load: requestData               
              }
          },
          title: {
              text: 'Live random data'
          },
          xAxis: {
              type: 'datetime',
              tickPixelInterval: 150,
              maxZoom: 20 * 1000
          },
          yAxis:
  
          {
          minPadding: 0.2,
              maxPadding: 0.2,
              title: {
                  text: '',
                  margin: 80
              }
          },
  
          series: [
          {
              name: 'Random data',
              data: []
          },
          {
              name: ' hahaha',
              data: []
              }
          ],
      });        
  });
  });
  &lt;/script&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
      &lt;div id="container"
          style="min-width: 728px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  
  
  
           *** the live-server-data.php is as followed:
      &lt;?php
  // Set the JSON header
  header("Content-type: text/json");
  
  // The x value is the current JavaScript time, which is the Unix time multiplied 
  // by 1000.
  $x = time() * 1000;
  // The y value is a random number
  $y = rand(48,52);
  // Create a PHP array and echo it as JSON
  $ret = array($x, $y);
  echo json_encode($ret);
  ?&gt;
  </code></pre>