ElementStacks
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height:400px;"></div>
<form id="controls">
<fieldset>
<legend>Show On Chart:</legend>
<input type="checkbox" id="set1" name="set1" checked="checked" /><label for="set1">Set 1</label>
<br />
<input type="checkbox" id="set2" name="set2" /><label for="set2">Set 2</label>
<br />
<input type="checkbox" id="set3" name="set3" /><label for="set3">Set 3</label>
</fieldset>
</form>
JavaScript
var chart, id='';
set1 = {name:'Set 1',data:[1,2,5,8,9,6,3,4,7,8],color:'#c66',id:'set1'};
set2 = {name:'Set 2',data:[5,8,9,3,1,4,7,8,9,6],color:'#6c6',id:'set2'};
set3 = {name:'Set 3',data:[8,5,7,4,2,3,6,9,4,1],color:'#666',id:'set3'};
//---------------------------------------
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [set1]
});
//---------------------------------------
$("#controls input").each(function(){
$(this).click(function(){
var sID = $(this).attr('id');
if($(this).attr('checked') == true){
chart.addSeries(window[sID]); //don't know how to make this reference the variable above...?
}
else{
chart.get(sID).remove();
}
});
});