Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="beacon" style="height: 400px; min-width: 310px"></div>
<div id="new" style="height: 400px; min-width: 310px"></div>
<div id="openholds" style="height: 400px; min-width: 310px"></div>
<div id="backlog" style="height: 400px; min-width: 310px"></div>

JavaScript

var chart;

 Highcharts.setOptions({
   global: {
     useUTC: false
   }
 });

 function requestData() {
   $.ajax({
     url: 'live-server-data.php',
     success: function(point) {
       var series = chart.series[0],
         shift = series.data.length > 20; // shift if the series is longer than 20

       // add the points
       var values = eval(point);
       chart.series[0].addPoint([values[0], parseInt(values[1])], true, shift);
       //         chart.series[1].addPoint([values[0], parseInt(values[2])], true, shift);
       //       chart.series[2].addPoint([values[0], parseInt(values[3])], true, shift);

       // call it again after one second
       setTimeout(requestData, 6000);
     },
     cache: false
   });

 }

 // Create the chart
 Highcharts.stockChart('beacon', {
   /*   				chart: {
   					renderTo: 'beacon',
   					defaultSeriesType: 'spline',
   					events: {
   						load: requestData,
   function () {
                 var extremes = this.xAxis[0].getExtremes();
                 setValues(extremes.min, extremes.max);
               },

               redraw: function () {
                 var extremes = this.xAxis[0].getExtremes();
                 setValues(extremes.min, extremes.max);
               }

   }
                                               
   				},
   */

   chart: {
     events: {
       load: function() {

         // set up the updating of the chart each second
         var series = this.series[0];
         setInterval(function() {
           var x = (new Date()).getTime(), // current time
             y = Math.round(Math.random() * 100);
           series.addPoint([x, y], true, true);
         }, 1000);
       }
     }
   },
   navigator: {
     enabled: false
   },
   rangeSelector: {
     enabled: false
   },
   scrollbar: {
     enabled: false
   },
   title: {

   },

   exporting: {
     enabled: false
   },
   yAxis: {
     min: 0
   },
   series: [{
     name: 'Random data',
     data: (function() {
     ...