Toggle Highcharts plotLine with button

Question

Good afternoon guys,

Just a very quick one: I was wondering whether it'd be possible to toggle a PlotLine (on/off) without having to remove it and then have to add it from scratch. The reason for this is that I am building my charts from a PHP array and can only define the plotline value once when the chart is loaded.

At the moment when I try to add a plotline from its ID it fails.

var hasPlotLine = true 
        $button = $('#button'),
        chart = $('#container').highcharts();

    $button.click(function() {
        if (!hasPlotLine) {
            chart.yAxis[0].addPlotLine('hello');
            $button.html('Remove');
        } else {
            chart.yAxis[0].removePlotLine('hello');
            $button.html('5-day average');
        }
        hasPlotLine = !hasPlotLine;
    });

Please take a look at my fiddle: http://jsfiddle.net/Guill84/3ApbR/

Also: would it be possible to get highcharts to give the last five day average directly? So the average of the last five data points ... and then plot the line for me? This could potentially get me around the issue...

Love you all and thanks for your help.

G.

Answer 1

You can echo your php into a javascript variable so that you can add it whenever you need.

However, as to your last question, you can easily grab the last 5 data points from the chart, calculate the average, and plot it.

example :

http://jsfiddle.net/jlbriggs/HZ88T/

relevant code:

...
},function(chart) {
    var lData = chart.series[0].data.slice(-5);
    var points = [];
    $.each(lData,function(i, point) {
        points.push(point.y);
    });
    var avg = mean(points);
    var options = {
        value:avg,
        width:1,
        color:'#c00',
        label: {
            align:'right',
            textAlign:'left',
            y: 2,
            text: '5 Day Avg: '+ avg,
            style: {
                fontSize:'9px'
            }
        }
    };
    chart.yAxis[0].addPlotBand(options);
});
//----------------------------------------
function mean(arr) {
    if(typeof arr != 'undefined') {
        var sum = 0;
        $.each(arr,function(i,v) {
            sum += v;
        });
        return sum / arr.length;
    }
    return false;       
}

Answer 2

Why not just load your php array into a js array initially, then use this variable wherever/whenever you need it?

$(function () {
    //create attribute array
    var attr = {
                id: 'hello',
                value: 60,
                width: 1,
                color: 'red',
                dashStyle: 'dash',
                label: {
                    text: '5-day average',
                    align: 'left',
                    y: 10,
                    x: 0
                }
            }
 . . .

http://jsfiddle.net/3ApbR/2/