Code: Select all
<div>
<div id="c-container" class="chart" style="margin: auto; width: 50%;"></div>
</div>
var chartdata = [] // put these two outside of function if error
var volume = [] //
var contrAdd = '{{contractAddress}}'
function refresh_graph_data(data)
{
for (var i=0; i < data.length; i++)
{
chartdata.push([
data[i]["date_"], // the date
data[i]["open"], // open
data[i]["high"], // high
data[i]["low"], // low
data[i]["close"] // close
]);
volume.push([
data[i]["date_"], // the date
data[i]["volume"] // the volume
]);
}
}
function plotCharts(){
Highcharts.setOptions({
series: {
boostThreshold: 1 // number of points in one series, when reaching this number, boost.js module will be used
}
})
Highcharts.stockChart('c-container', {
events: {
redraw: false
},
navigation: {
bindings: {
rect: {
annotationsOptions: {
animation: {
defer: 0
},
shapeOptions: {
fill: 'rgba(255, 0, 0, 0.8)'
}
}
}
},
annotationsOptions: {
typeOptions: {
line: {
stroke: 'rgba(255, 0, 0, 1)',
strokeWidth: 10
}
}
}
},
yAxis: [{
labels: {
align: 'left'
},
height: '80%'
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'price chart',
name: 'Price',
data: chartdata
}, {
type: 'column',
id: 'volume chart',
name: 'Volume',
data: volume,
yAxis: 1
}]
});
}
setInterval(ajaxCallFun, 10000)
function ajaxCallFun(){
$.ajax({
url: "/refreshGraphRoute/"+contrAdd,
dataType: 'json',
success: function(data){
refresh_graph_data(data);
plotCharts();
chartdata = [];
volume = [];
}
})
}
Thanks