$ (function () {
/**
* Load new data depending on the selected min and Max
*/
function Aftersetextremes (e) {
var chart = $ (' #container '). Highcharts ();
Chart.showloading (' Loading data from server ... ');
$.getjson (' http://www.highcharts.com/samples/data/from-sql.php?start= ' + math.round (e.min) +
' &end= ' + math.round (e.max) + ' &callback=? ', function (data) {
Chart.series[0].setdata (data);
Chart.hideloading ();
});
}
See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/ data/from-sql.php
$.getjson (' http://www.highcharts.com/samples/data/from-sql.php?callback=? ', function (data) {
ADD a null value for the end date
data = [].concat (data, [[DATE.UTC (), 9, N, N, N), NULL, NULL, NULL, NULL]]);
Create the chart
$ (' #container '). Highcharts (' Stockchart ', {
Chart: {
Type: ' Candlestick ',
Zoomtype: ' x '
},
Navigator: {
Adapttoupdateddata:false,
Series: {
Data:data
}
},
ScrollBar: {
Liveredraw:false
},
Title: {
Text: ' AAPL history by the minute from 1998 to 2011 '
},
Subtitle: {
Text: ' Displaying 1.7 million data points in Highcharts Stock by async server loading '
},
Rangeselector: {
Buttons: [{
Type: ' Hour ',
Count:1,
Text: ' 1h '
}, {
Type: ' Day ',
Count:1,
Text: ' 1d '
}, {
Type: ' Month ',
Count:1,
Text: ' 1m '
}, {
Type: ' Year ',
Count:1,
Text: ' 1y '
}, {
Type: ' All ',
Text: ' All '
}],
Inputenabled:false,//it supports only days
Selected:4//All
},
Xaxis: {
Events: {
Aftersetextremes:aftersetextremes
},
minrange:3600 *//One Hour
},
YAxis: {
floor:0
},
Series: [{
Data:data,
DataGrouping: {
Enabled:false
}
}]
});
});
});
"Highstock" by Time (zoom) Let it go to access the server?