Highcharts : dynamically update data for all the series with new data and series name
by Rahul Gupta
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div>
<div style="display:inline-block; padding-right:20px; padding-left:20px;">
<select id="list">
<option id="year0" value="a" selected=yes >Option A</option>
<option id="year1" value="b">Option B</option>
</select>
</div>
</div>
<div id="containerYo" style="width: 528px; height: 400px; margin: 0 auto"></div>
JavaScript
var chartBench
$(document).ready(function () {
chartBench = new Highcharts.Chart({
chart: {
renderTo: 'containerYo',
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {},
plotOptions: {
series: {
shadow: false,
borderWidth: 0
}
},
xAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
categories: ['2011', '2012', '2013', '2014'],
title: {
text: 'Years'
}
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
labels: {
format: '$ {value}'
},
title: {
text: ''
}
},
series: [{
"name": "Yours",
"data": [110, 100, 120, 130]
}, {
"name": "Another",
"data": [100, 90, 110, 120]
}, {
"name": "Another B",
"data": [90, 80, 100, 110]
}, {
"name": "Another C",
"data": [80, 70, 90, 100]
}]
});
});
var option_a_data = [{
"name": "Option-A (1)",
"data": [10, 20, 30, 40]
}, {
"name": "Option-A (2)",
"data": [50, 60, 70, 80]
}, {
"name": "Option-A (3)",
"data": [90, 100, 110, 120]
}, {
"name": "Option-A (4)",
"data": [130, 140, 150, 160]
}];
var option_b_data = [{
"name": "Option-B (1)",
"data": [110, 100, 90, 80]
}, {
"name": "Option-B (2)",
"data": [110,...