
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<script>
	
	/**
	 * 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 point
	            chart.series[0].addPoint(point, true, shift);
            
	            // call it again after one second
	            setTimeout(requestData, 1000);    
	        },
	        cache: false
	    });
	}
	

	Highcharts.chart('container', {
	    chart: {
	        type: 'spline',
	        animation: Highcharts.svg, // don't animate in old IE
	        marginRight: 10,
        	events: {
            load: requestData
        	}
	    },

	    time: {
	        useUTC: false
	    },

	    title: {
	        text: 'Live random data'
	    },
	    xAxis: {
	        type: 'datetime',
	        tickPixelInterval: 150
	    },
	    yAxis: {
	        title: {
	            text: 'Value'
	        },
	        plotLines: [{
	            value: 0,
	            width: 1,
	            color: '#808080'
	        }]
	    },
	    tooltip: {
	        headerFormat: '<b>{series.name}</b><br/>',
	        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
	    },
	    legend: {
	        enabled: false
	    },
	    exporting: {
	        enabled: false
	    },
	    series: [{
	        name: 'Random data',
	        data: []
	    }]
	});
</script>