How to set the highcharts interactive with select option

Question

I want to let my highcharts figure change with the select option. For example, I select north than rendering parts of my data, and if I select east, rendering other parts of my data. Here is my code in jsfiddle. Any help will be thankful.

artemisian · Accepted Answer · 2017-03-08T06:13:58.127

You just need to bind the onchange event to the select element and call a function that will update the chart like: onchange="updateChart(this.value)"

See below a working sample:

/*test the interactive of select and highcharts rendering*/

//create the data that will use
//AA
var data1 = [  
  {y:0, prop:0},
    {y:3, prop:12},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:9, prop:36},
    {y:10, prop:40},
    {y:13, prop:52},
    {y:13, prop:52},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100}
]; 

//BB
var data2 = [  
  {y:0, prop:0},
    {y:5, prop:28},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:7, prop:39},
    {y:8, prop:44},
    {y:8, prop:44},
    {y:8, prop:44},
    {y:9, prop:50},
    {y:10, prop:56},
    {y:10, prop:56},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100}
];

//CC
var data3 = [  
  {y:0, prop:0},
    {y:7, prop:23},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:13, prop:43},
    {y:19, prop:63},
    {y:20, prop:67},
    {y:20, prop:67},
    {y:21, prop:70},
    {y:24, prop:80},
    {y:29, prop:97},
    {y:29, prop:97},
    {y:29, prop:97},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100}
];

//DD
var data4 = [  
  {y:0, prop:0},
    {y:5, prop:15},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:18, prop:55},
    {y:20, prop:61},
    {y:20, prop:61},
    {y:22, prop:67},
    {y:27, prop:82},
    {y:27, prop:82},
    {y:27, prop:82},
    {y:31, prop:94},
    {y:32, prop:97},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100}
];

//EE
var data5 = [  
  {y:0, prop:0},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:11, prop:38},
    {y:17, prop:59},
    {y:25, prop:86},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100}
]; 

//FF
var data6 = [  
  {y:0, prop:0},
    {y:2, prop:8},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:8, prop:31},
    {y:11, prop:42},
    {y:14, prop:54},
    {y:14, prop:54},
    {y:15, prop:58},
    {y:20, prop:77},
    {y:20, prop:77},
    {y:22, prop:85},
    {y:22, prop:85},
    {y:23, prop:88},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100}
];

//GG
var data7 = [  
  {y:0, prop:0},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:10, prop:56},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100}
];

var series = [{
        name: 'AA',
        data: data1
    }, {
        name: 'BB',
        data: data2
    }, {
        name: 'CC',
        data: data3
    }, {
        name: 'DD',
        data: data4
    }, {
        name: 'EE',
        data: data5
    }, {
        name: 'FF',
        data: data6
    }, {
        name: 'GG',
        data: data7
}];

var chartOptions = {
  chart:{zoomType: 'xy'},
    
    title: {
        text: 'test the interactive of select option and highcharts'
    },

    subtitle: {
        text: ''
    },
    
    xAxis: {
      crosshair: { 
        width: 2,
        color: 'black',
        dashStyle: 'Solid'
        },
        categories: ['2015/12/7','2015/12/14','2015/12/21','2015/12/28','2016/1/4','2016/1/11','2016/1/18','2016/1/25','2016/2/1','2016/2/8','2016/2/15','2016/2/22','2016/2/29','2016/3/7','2016/3/14','2016/3/21','2016/3/28','2016/4/4','2016/4/11','2016/4/18','2016/4/25','2016/5/2']
    },

    yAxis: {
        title: {
            text: 'number of finished' 
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    
    tooltip: { 
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> (finished{point.prop}%)<br/>',
            valueDecimals: 0,
            split: true,
            valueSuffix: ' number'
        }
};

window.updateChart = function(selection) {
  if (selection == "") {
   chartOptions.series = series;
  } else if (selection == "north") {
    chartOptions.series = [series[0],series[1],series[2],series[3]];
  } else if (selection == "east") {
    chartOptions.series = [series[4],series[5],series[6]];
  }

  Highcharts.chart('container', chartOptions);
}

//start rendering----------------------------------------------
updateChart("");

#container {
 min-width: 310px;
 max-width: 900px;
 height: 600px;
 margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Please select the location:
<select name='location' onchange="updateChart(this.value)">
  <option value= "" selected value="">Select</option>
  <option value="north">north</option>
  <option value="east">east</option>
</select>
<br><br>

<div id="container"></div>

Thanks for your help, the result in your snippet is what I want, Thanks a lot. But I have one question is that why I can't run this in my [jsfiddle](https://jsfiddle.net/swchen/wphqpo8u/)? — swchen, Mar 08 '17 at 06:04
I've edited my snippet should work now. The problem happens b/c the way fiddle loads the javascript section, you can read more here http://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net — artemisian, Mar 08 '17 at 06:15
Thanks for your help and the references, it works now, thanks. — swchen, Mar 08 '17 at 06:21

How to set the highcharts interactive with select option

1 Answers1

Linked