Chủ Nhật, 12 tháng 1, 2014

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:

        var pollChart;
         $(document).ready(function() {
             var colors = Highcharts.getOptions().colors;
             var teamsJson = [{"name":"Team A","voteCount":"98"}
                               {"name":"Team B","voteCount":"32"},
                               {"name":"Team C ","voteCount":"45"}] ;
             // use underscore to extract the names label   
             var categories = _.pluck(teamsJson, 'name');
             var data = [];
         for(var i = 0, teamJsonLength = teamsJson.length ; i < teamJsonLength ; i++ )
             {
                 var team = teamsJson[i];
                 // alternate colors, then repeat it if exceed the highchart options
                 data.push({y: parseInt(team.voteCount) , color: colors[ i % colors.length] });
             }
                 pollChart = new Highcharts.Chart({
                    chart: {
                       renderTo: 'chartContainer',
                       type: 'bar' // change this to column if want to show the column chart
                    },
                    title: {
                       text: 'Poll Name Here',
                       style:{
                             color: '#3E576F',
                             fontSize: '23px',
                             fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif'
                       }
                    },
                    /*
                    subtitle: {
                        text: 'Poll Description here'
                    },
                    */
                    xAxis: {
                       categories: categories,
                       labels: {
                           style: {
                               fontSize: '16px',
                               fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
                               color: 'black'
                           }
                       }
                    },
                    yAxis: {
                       title: {
                          text: 'Votes',
                          style: {
                              fontSize: '14px',
                              fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
                              color: 'black',
                              fontWeight: 'normal'
                          }
                       }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip:{
                       enabled: false
                    },
                    series: [{
                       name: 'Vote Count',
                       data: data,
                       dataLabels: {
                           enabled: true,
                        }             
                      }
                    ],
                    exporting: {
                        enabled: false
                    }
                 });
              });
    To do real time update, we just need to use jQuery to get the updated JSON:

    setInterval(function() { getData(); }, 30000);
    function getData(){
                 console.log("retrieving data from server ");
                 var url = "<some server url>";
                 $.getJSON (url, function (jsonFromServer) {
                    var data = <get data from the json  results >
                    // update the series data
                    pollChart.series[0].setData(data);
                 });
             }

    Source: http://ngo-hung.com/blog/2012/07/19/create-a-simple-highcharts-bar-chart-with-real-time-update

    Không có nhận xét nào:

    Đăng nhận xét