Create a simple Highcharts bar chart with real time update

I need to use Highcharts for one of my recent projects to show the voting results. The library is very easy to use and flexible :)

Below is an example of how to set it up to create a simple bar chart and customize its labels:

  1.  var pollChart;
  2.      $(document).ready(function() {
  3.          var colors = Highcharts.getOptions().colors;
  4.          var teamsJson = [{"name":"Team A","voteCount":"98"},
  5.                                {"name":"Team B","voteCount":"32"},
  6.                        {"name":"Team C ","voteCount":"45"}] ;
  7.          // use underscore to extract the names label    
  8.          var categories = _.pluck(teamsJson, 'name'); 
  9.          var data = [];
  10.   
  11.      for(var i = 0, teamJsonLength = teamsJson.length ; i < teamJsonLength ; i++ )
  12.          {
  13.              var team = teamsJson[i];
  14.   
  15.              // alternate colors, then repeat it if exceed the highchart options
  16.              data.push({y: parseInt(team.voteCount) , color: colors[ i % colors.length] });
  17.          }
  18.   
  19.          pollChart = new Highcharts.Chart({
  20.             chart: {
  21.                renderTo: 'chartContainer',
  22.                type: 'bar' // change this to column if want to show the column chart
  23.             },
  24.             title: {
  25.                text: 'Poll Name Here',
  26.                style:{
  27.                      color: '#3E576F',
  28.                      fontSize: '23px',
  29.                      fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif'
  30.                }
  31.             },
  32.             /*
  33.             subtitle: {
  34.                 text: 'Poll Description here'
  35.             },
  36.             */
  37.             xAxis: {
  38.                categories: categories,
  39.                labels: {
  40.                    style: {
  41.                        fontSize: '16px',
  42.                        fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
  43.                        color: 'black'
  44.                    }
  45.                }
  46.             },
  47.             yAxis: {
  48.                title: {
  49.                   text: 'Votes',
  50.                   style: {
  51.                       fontSize: '14px',
  52.                       fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
  53.                       color: 'black',
  54.                       fontWeight: 'normal'
  55.                   }
  56.                }
  57.             },
  58.             legend: {
  59.                 enabled: false
  60.             },
  61.             tooltip:{
  62.                enabled: false
  63.             },
  64.             series: [{
  65.                name: 'Vote Count',
  66.                data: data,
  67.                dataLabels: {
  68.                    enabled: true,
  69.   
  70.                 }      
  71.   
  72.               }
  73.             ],
  74.             exporting: {
  75.                 enabled: false
  76.             }
  77.          });
  78.       });

To do real time update, we just need to use jQuery to get the updated JSON:

  1.  setInterval(function() { getData(); }, 30000);
  2.   
  3.  function getData(){
  4.              console.log("retrieving data from server ");
  5.              var url = "<some server url>";
  6.   
  7.              $.getJSON (url, function (jsonFromServer) {
  8.                                  var data = <get data from the json  results >
  9.   
  10.                                  // update the series data
  11.                  pollChart.series[0].setData(data);
  12.              });
  13.          }
comments powered by Disqus