Question

This is probably quite a simple answer however I’m very new to jQuery/JavaScript so please bear with me.

At the moment I have a drop down with 4 options and then a <button> next to it that changes a chart based on what the user has selected. Basically all I’m trying to achieve is to remove the need of a button and just refresh the chart when the user clicks on one of the options.

The following is the jsfiddle that I have based it on.

http://jsfiddle.net/jlbriggs/EmMxH/92/

Any help would be great, thanks

Henry

Answer 1

You want the “change” event on the select list, not the click event. (based on your fiddle code)

<select id="list">
  <option value="A">Data Set A</option>
  <option value="B">Data Set B</option>
  <option value="C">Data Set C</option>
  <option value="D">Data Set D</option>    
</select>

$("#list").change(function(){
  //... do stuff
  var selVal = $(this).val();
  if(selVal == "A" || selVal == ''){
    options.series = [{name: 'A', data: [1,2,3,2,1]}]
  } else if(selVal == "B"){
    options.series = [{name: 'B', data: [3,2,1,2,3]}]
  } else if(selVal == "C"){
    options.series = [{name: 'C', data: [5,4,8,7,6]}]
  } else {
    options.series = [{name: 'D', data: [4,7,9,6,2]}]
  }
  var chart = new Highcharts.Chart(options);
});