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) {
                console.log(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...