make one column dynamic average in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

make one column dynamic average in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from www .  j  av  a2  s .co m*/
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Title'
        },
        subtitle: {
            text: 'subtitle'
        },
        xAxis: {
            categories: [
                'col0','col1','col2'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'y Axis'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
            series: {
                events: {
                    legendItemClick: function(){
                        var tot=0,num=0,avg=0;
                        thisSeries=this;
                        if(this.name=="Average"){
                            return false;
                        }
                        this.data.forEach(function(ser,serI){
                            ser.series.chart.series.forEach(function(col,colI){
                                if(col.name=="Average"){
                                    avgCol=col;
                                    return;
                                }
                                if(thisSeries==col && col.visible){
                                    return;
                                }
                                if(thisSeries!=col && !col.visible){
                                    return;
                                }
                                tot+=col.data[serI].y;
                                num++;
                            });
                            avg=tot/num;
                            tot=0;
                            num=0;
                            avgCol.data[serI].update(avg);
                        });
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            name: '1',
            data: [9,6,3]
        }, {
            name: '2',
            data: [8,5,2]
        }, {
            name: '3',
            data: [7,4,1]
        }, {
            name: 'Average',
            data: [8,5,2]
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials