Highcharts Demo

author(s): Torstein Hønsi

by itsjustcarlos

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: 'http://itsjustcarlos.com/js-fiddle/live-server-mysql.php',
		    //    url: 'http://itsjustcarlos.com/js-fiddle/live-server-server.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);


		      // call it again after one second
		      setTimeout(requestData, 1000);
		    },
		    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: {
		      plotBands: [{
		        value: 1462583490000,
		        width: 2,
		        color: 'red'
		      }]

		    },
		    yAxis: {
		      minPadding: 0.2,
		      maxPadding: 0.2,
		      title: {
		        text: 'Value',
		        margin: 80
		      }
		    },
		    series: [{
		      name: 'WO',
		      data: [
		        [1462579328000, 7],
		       ...