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="container" style="height: 400px; min-width: 310px"></div>

JavaScript

var chart; // global
		
		/**
		 * Request data from the server, add it to the graph and set a timeout to request again
		 */
		 
		 
		   /**
           * 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 > 20; // shift if the series is longer than 20
       
                   // add the points
      var values = eval(point);
                   chart.series[0].addPoint([values[0], values[1]], true, shift);
                   chart.series[1].addPoint([values[0], values[2]], true, shift);
                 
                   
                   // call it again after one second
                   setTimeout(requestData, 6);   
                },
                cache: false
             });

          }
          
          		$(document).ready(function() {
		
		  Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
		
		
			chart = new Highcharts.StockChart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'spline',
					events: {
						load: requestData
					}
				},
				
        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'hour',
                text: 'Hour'
            },{
                count: 1,
                type: 'day',
                text: 'Day'
            }, {
                count: 3,
                type: 'day',
                text: '3-day'
            }],
            inputEnabled: true,
            selected: 1
        },
				title: {
					text: 'Live random data'
				},
				xAxis: {
				
					
				},
				yAxis: {
					minPadding: 0.2,
					maxPadding: 0.2,
					title: {
						text: 'Value',
						margin: 80
					}
				},
				series: [{
					name: 'WO',
					data:...