title: Add dynamic data to line chart from mysql database with highcharts
body: <p>I want to add data point to my line chart with ajax or json, now i must reload whole webpage to show my new data on chart. But i want to show live data by adding point like these link: </p>
  
  <p><a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/" rel="nofollow noreferrer">jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/</a></p>
  
  <p><a href="http://www.highcharts.com/studies/live-server.htm" rel="nofollow noreferrer">www.highcharts.com/studies/live-server.htm</a></p>
  
  <p>I was try to retrieve my data from mysql to add on chart by json but nothing happened. This is my code in live-server-data.php :</p>
  
  <pre><code>&lt;?php
  
  header("Content-type: text/json");
  
  
   include_once 'include/connection.php';
   $db = new DB_Class(); 
  
  
       $query = "select distinct idchip from datatable ";
       $result = mysql_query( $query );
       $rows = array();
       $count = 0;
  
       while( $row = mysql_fetch_array( $result ) ) {
           $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." datetime DESC limit 0,1 ";
  
          $result1 = mysql_query($SQL1);
  
          while ($rows = mysql_fetch_array($result1)) {
             $data[] = $rows['1'];
             $datatime[] = 'moment('.$rows['0'].').valueOf()';
          }
  
          // The x value is the current JavaScript time, which is the Unix time multiplied 
          // by 1000.
          $x = $datatime;
          // The y value is a random number
          $y = $data;
       }
  
  
  // Create a PHP array and echo it as JSON
  $ret = array($x, $y);
  echo json_encode($ret);
  ?&gt;
  </code></pre>
  
  <p>and this is what I used to get data and show on chart in my index.php page.</p>
  
  <pre><code>var chart; // global
     /**
       * Request data from the server, add it to the graph and set a timeout to request again
       */
      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 20
  
                  // add the point
                  chart.series[0].addPoint(eval(point), true, shift);
  
                  // call it again after one second
                  setTimeout(requestData, 1000);  
              },
              cache: false
          });
      }
  
      $(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: 'Value',
                      margin: 80
                  }
              },
              series: [{
                  name: 'Random data',
                  data: []
              }]
          });     
      });
  </code></pre>
  
  <p>This is my chart which i reload page to get new data right now, but i want to add new point to chart for "real time" </p>
  
  <p><img src="https://i.stack.imgur.com/eZto2.png" alt="http://imgur.com/LfEjlRD"></p>