Here is my code :
Code: Select all
var data = [];
var chart = new Highcharts.chart( {
chart: {
type: 'area',
renderTo: 'container',
zoomType: 'xy',
events : {
load : function () {
// set up the updating of the chart each 5 seconds
setInterval(function () {
while (chart.series.length) {
chart.series[0].remove();
}
chart.series[0].update({name:'Bids',data:[[0.00892,7239.71], [0.00893,3069.5262], [0.00894,2530.7275]],color: '#03a7a8'},{name: 'Asks',data:[[0.00934,2752.3226], [0.00933,982.5471], [0.00932,4860.6602]],color: '#fc5857'});
}, 1000);
}
}
},
title: {
text: 'Market Depth'
},
xAxis: {
minPadding: 0,
maxPadding: 0,
plotLines: [{
color: '#888',
value: 0.1523,
width: 1,
label: {
text: 'Actual price',
rotation: 90
}
}],
title: {
text: 'Price'
}
},
yAxis: [{
lineWidth: 1,
gridLineWidth: 1,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'left',
x: 8
}
}, {
opposite: true,
linkedTo: 0,
lineWidth: 1,
gridLineWidth: 0,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'right',
x: -8
}
}],
legend: {
enabled: false
},
plotOptions: {
area: {
fillOpacity: 0.2,
lineWidth: 1,
step: 'center'
}
},
tooltip: {
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>'
//valueDecimals: 2
},
series:
<?php foreach($this->bids as $key => $value) {
$bidl = "[".$value->price.",".$value->quantity."],";
$bid2[] = str_replace(' ', '', $bidl);
}
$bid3 = rtrim(join(" ",$bid2),",");
foreach($this->asks as $key => $value) {
$askl = "[".$value->price.",".$value->quantity."],";
$ask2[] = str_replace(' ', '', $askl);
}
$ask3 = rtrim(join(" ",$ask2),",");
$depth = "[{name:'Bids',data:[".$bid3."],color: '#03a7a8'},{name: 'Asks',data:[".$ask3."],color: '#fc5857'}]";
echo $depth;
?>
});