Show / Hide Bandwidth in Highcharts - Javascript

I have a highchart with several plot lines. I've added a button to the diagram that shows / hides the plot lines. As far as they know, the only way to do this is to actually add / remove bandwidth, because there are no show / hide options in the conspiracy lanes (correct me if I'm wrong?)

Since the diagram has several gaps, I added them to the array. An array of graphic bars is then added to the chart. Then the button removes or adds them back.

Here's what I did:

Creating an array plotbands:

var startDates = [1413417600000, 1412035200000];
var endDates = [1414454400000, 1412208000000];
var id = ['first', 'second'];
var plotBands = [];
var i = 0;

while (i < endDates.length) {
    plotBands.push({
        color: 'rgba(0,255,0,0.4)',
        from: startDates[i],
        to: endDates[i],
        id: id[i]
    });
    i++;
}

      

Adding storylines when creating a diagram:

xAxis: {
    plotBands: plotBands,
    type: 'datetime'
}

      

Function associated with the button to show / hide the plot lines:

var hasPlotBand = true;
    chart = $('#arearange').highcharts();
    $button = $('#button');

$button.click(function () {
    if (!hasPlotBand) {
        chart.xAxis[0].addPlotBand(plotBands[id=='first']); //this line is not working
        $button.html('Remove plot band');
    } else {
        chart.xAxis[0].removePlotBand('first');
        $button.html('Add plot band');
    }
    hasPlotBand = !hasPlotBand;
});

      

Inline bars are added correctly when the chart is initially created. The inline stripes are removed correctly using id = 'first' to remove the correct stripes.

The problem is I'm not sure how to add the conspiracy stripes again, i.e. I need to add the groups id = 'first' again. I tried re-adding groups but doesn't work:

chart.xAxis[0].addPlotBand(plotBands[id=='first']);

      

and

chart.xAxis[0].addPlotBand('first');

      

For testing purposes, I also tried to re-add the entire plotbands array (without trying to specify the target id, but that doesn't work either.

Thanks for any suggestions.

+3


source to share


1 answer


You can also manipulate SVG elements.

$('#btn').click(function () {
        var plotBand = chart.yAxis[0].plotLinesAndBands[0];

        if (plotBand.hidden) {
            plotBand.hidden = false;
            plotBand.svgElem.show();
        } else {
            plotBand.hidden = true;
            plotBand.svgElem.hide();
        }
    });

      



Example: http://jsfiddle.net/stypmpde/

+2


source







All Articles