title: Updating Highcharts realtime using Socket.io
body: <p>I'm making a dashboard using node.js, socket.io and highcharts. </p>
  
  <p>I want my chart to update dynamically on receiving a request from socket.io.</p>
  
  <p>How do I do that?</p>
  
  <p>Here is my client side code,</p>
  
  <pre><code>&lt;script&gt;
  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 &amp;&amp; Highcharts.theme.textColor) || 'gray'
                      }
                  }
              },
              legend: {
                  align: 'right',
                  x: -70,
                  verticalAlign: 'top',
                  y: 20,
                  floating: true,
                  backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || 'white',
                  borderColor: '#CCC',
                  borderWidth: 1,
                  shadow: false
              },
              tooltip: {
                  formatter: function() {
                      return '&lt;b&gt;'+ this.x +'&lt;/b&gt;&lt;br/&gt;'+
                          this.series.name +': '+ this.y +'&lt;br/&gt;'+
                          'Total: '+ this.point.stackTotal;
                  }
              },
              colors: ['#FFCC99','#3366CC'],
              plotOptions: {
                  column: {
                      stacking: 'normal',
                      dataLabels: {
                          enabled: true,
                          color: (Highcharts.theme &amp;&amp; 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]
              }]
          });
      });
  
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>How do I go about?</p>