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.
source to share
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/
source to share