highcharts - make one column dynamic average?

Question

I have a highcharts column that I've added some data to. I have also added a average column next to the other columns. This "average" column is created with static values at the same time as the other columns. Is it possible to create this average column dynamically, so that when clicking on one columns name (hiding it), it will also recalculate the average column?

jsfiddle here: http://jsfiddle.net/skorpion/L5chyc3e/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Title'
        },
        subtitle: {
            text: 'subtitle'
        },
        xAxis: {
            categories: [
                'Columns'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'y Axis'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '1',
            data: [5]
        }, {
            name: '2',
            data: [15]
        }, {
            name: '3',
            data: [7]
        }, {
            name: 'Average',
            data: [9]
        }]
    });
});

/Niclas

Answer 1

Thanks! Just before your post I saw the legendItemClick, and from there I almost got it by myself, but your code helped me to the final result.

However, my original plan was to make it work with multiply series so I had some problem until I finally got to a working result.

This is the finished result:

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);
    });
}

updated fiddle here: http://jsfiddle.net/skorpion/L5chyc3e/

/Niclas

Answer 2

You can handle this in the legendItemClick event:

legendItemClick: function () {
    var thisSeries = this;
    var tot = 0, num = 0; 
    var aveSeries = null;
    this.chart.series.forEach(function(d,i){
       if (d.name == "Average"){
           aveSeries = d;
           return;
       }
        if (thisSeries == d && d.visible){
           return;
        }
       if (thisSeries != d && !d.visible){
           return;
       }
       tot += d.data[0].y;
       num += 1.0;
    });
    var ave = tot/num;
    aveSeries.setData([ave]);
 }

Updated fiddle here.