ElementStacks
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
JavaScript
graph = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
zoomType:'x',
events:{
selection: function(event){
var a = event.xAxis[0].min;
var b = event.xAxis[0].max;
graph.series[0].setData([73,54,90],false);
graph.redraw();
graph.series[0].setData([67,44,25],false);
graph.redraw();
graph.xAxis[0].setExtremes(a,b);
}
}
},
title: {
text: 'Sent x Views x Clicks',
x: -20
},
subtitle: {
text: 'Amount per hour ( Nowaday )',
x: -20
},
yAxis: {
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
series: [{
name: 'Sent',
data: [10,23,53]
}, {
name: 'Errors',
data: [73,54,83]
}, {
name: 'Clicks',
data: [84,47,32]
}, {
name: 'Views',
data: [67,44,36]
}]
});