highcharts spline
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/maps/modules/exporting.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div class="chart" id="statusChart" >
</div>
JavaScript
jQuery(document).ready(function() {
/*
var url = 'statistics';
$.ajax(url).done(function(data) {
loadStatusChart(data);
});
function updateStatusSeries(series){
var url = 'statistics';
$.ajax(url).done(function(data) {
var statusCode = data.statusCode[0];
series.addPoint([statusCode.label, statusCode.value], true, true);
});
}
*/
var updatePeriod = 2000;
loadStatusChart( {statusCode: [
{ label: (new Date()).getTime(), value: Math.random() },
{ label: (new Date()).getTime(), value: Math.random() },
{ label: (new Date()).getTime(), value: Math.random() },
{ label: (new Date()).getTime(), value: Math.random() },
]} );
function updateStatusSeriesMock() {
var x = (new Date()).getTime(), // current time
y = Math.random();
return [x, y];
}
function loadStatusChart(statistics) {
var StatusCode = statistics.statusCode;
var StatusSeries = [];
$.each(StatusCode, function(index, item) {
/*
var timeInSeconds = item.label/1000;
for(var i = 10; i >= 1; i--){
StatusSeries.push({
x : (timeInSeconds - i*updatePeriod),
y : 0
});
}
*/
StatusSeries.push({
x : item.label,
y : item.value
});
}); //each
var x = StatusCode.length;
$("#statusChart").highcharts({
chart : {
type : 'spline',
//animation : Highcharts.svg,
marginRight : 10,
events : {
load : function(){
//set up updating of the chart each 10 seconds
var series = this.series[0];
...