javascript - Highcharts/Highstock dynamically add/remove multiple series -

i'm java/php programmer unreasonable inability grasp javascript, need hand should simple.

take chart here: http://www.highcharts.com/stock/demo/compare

this shows 3 series, predefined. have equivalent set own data.

what have 150 series of data, , want user able choose display without page refresh. know need use chart.addseries() in way, , i've looked @ demo adds series button click: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/

the thing is, button hard coded in both web page , js:

<button id="button">add series</button>  <script> $('#button').click(function() {     var chart = $('#container').highcharts();     chart.addseries({         name: 'adbe',         data: adbe     });     $(this).attr('disabled', true); }); </script> 

i don't fancy 150 buttons, don't want unique function per button. can rewrite short example cannibalise? js rudimentary.

maybe check-boxes fine, kind of toggle work. can series removed chart (other clicking on legend)?

can provide tips on tying list of 150 series chart itself?

each series must loaded individually via json.

or, should load 150 series , disable 149 of them, allowing user toggle via legend itself?

i made solution using check-boxes. targeted checkboxes ones class "choice". "foreach" function goes through checkboxes. name becomes "value" of current choice, , since didn't provide context data data being fed manually. can play , make work you.

$('#button').click(function() {     var buttons = $('.choice');     var chart = $('#container').highcharts();      buttons.each(function(){         var choice = this.value;          chart.addseries({             name: choice,             data: adbe         });     }); });