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

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: '{series.name}: {point.y} (finished{point.prop}%)
',
            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;
}




Please select the location:

How to set the highcharts interactive with select option

Answers (1)

Related Questions