Jugal | Add Remove Legend Dynamically | Highchart & Highstock

http://stackoverflow.com/questions/13600741/filtering-legend-of-a-highcharts-by-only-visible-series Jugal Thakkar http://jugal.me/

by J. Albert Bowden

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>
<button id="remove">Remove</button>
<button id="add">Add</button>

CSS

#container{
    min-width:500px;
}

JavaScript

var chartingOptions = {

};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var item = chart.series[1];
$("#add").click(function() {
    item.options.showInLegend = true;
    chart.legend.renderItem(item);
    chart.legend.render();
});

$("#remove").click(function() {    
    item.options.showInLegend = false;
    item.legendItem = null;
    chart.legend.destroyItem(item);
    chart.legend.render();
});