[英]Updating Highcharts realtime using Socket.io
I'm making a dashboard using node.js, socket.io and highcharts. 我正在使用node.js,socket.io和highcharts制作仪表板。
I want my chart to update dynamically on receiving a request from socket.io. 我希望我的图表在收到来自socket.io的请求时动态更新。
How do I do that? 我怎么做?
Here is my client side code, 这是我的客户端代码,
<script>
var socket=io();
var sales=0;
var e1tcount=0;
var e1scount=0;
var e2tcount=0;
var e2scount=0;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function(){
socket.on('response', function(arr){
$('#c1').html(arr[0]);
sales+=arr[2];
$('#sales').html(sales);
if(arr[1]=="CT")
{
e1tcount++;
$('#e1t').html(e1tcount);
e1scount+=arr[2];
$('#e1s').html(e1scount);
//Tried this, doesnt work
var sold=chart.series[0].data[0].y;
chart.series[0].data[0].update(sold+1);
}
if(arr[1]=="AB")
{
e2tcount++;
$('#e2t').html(e2tcount);
e2scount+=arr[2];
$('#e2s').html(e2scount);
}
});
}
}
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Event 1', 'Event 2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: ['#FFCC99','#3366CC'],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'Sold',
data: [0, 0]
}, {
name: 'Available',
data: [20, 20]
}]
});
});
</script>
Intially the number of tickets is 20, but as soon as I post data using curl, the number of sold tickets should increase and available tickets should decrease, depending on the event. 门票的数量最初是20,但是一旦我使用curl发布数据,销售门票的数量应该增加,并且可用门票应该减少,具体取决于事件。
How do I go about? 我该怎么办?
And what error do you have in console? 你在控制台有什么错误? ;) I guess somethng about 'cannot read property of udefined'. ;)我猜想有些'无法读取udefined的属性'。 You need to create chart variable first, then you can use that variable, right? 您需要先创建图表变量,然后才能使用该变量,对吧? So: 所以:
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function(){
var chart = this; // create chart variable for future use
socket.on('response', function(arr){
Then that code should work: 然后该代码应该工作:
//Tried this, doesnt work
var sold=chart.series[0].data[0].y;
chart.series[0].data[0].update(sold+1);
If this won't be enough, then copy&paste errors here. 如果这还不够,请在此处复制并粘贴错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.