Highchart scroll
HTML
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://www.loly.com.au/ebp/highcharts.js"></script>
<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script>
<div id="barGraph" ></div>
JavaScript
$(function() {
$.getJSON('https://www.loly.com.au/ebp/jsonp.php?callback=?', function(data) {
//http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?
// https://www.loly.com.au/ebp/jsonp.php?callback=?
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
type: 'column',
renderTo: 'barGraph',
backgroundColor: '#424143',
polar: true,
events: {
redraw: function(event) {
if (chart.xAxis) {
var extremes = chart.xAxis[0].getExtremes();
if (extremes && extremes.min == extremes.dataMin) {
// Ajax call to load more data
console.log("time to load more data!");
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}
}
}
}
},
//styling the scrollbar
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 0,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
// Hiding all labels
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
...