Updating Highcharts realtime using Socket.io

Question

I'm making a dashboard using node.js, socket.io and highcharts. I want my chart to update dynamically on receiving a request from 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: {…

Accepted Answer

And what error do you have in console? ;) I guess somethng about 'cannot read property of 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.

Updating Highcharts realtime using Socket.io

Solution

Problem