user3826864
Reputation: 459
Highcharts - setData() not updating Column Graph Correctly - stumped
I have a Highcharts Column graph that I am updating using setData() that is triggered by a User Selected Drop Down. I am sure that the code was working correctly before, but now it does not trigger the setData() correctly. Please see my JS Fiddle here
http://jsfiddle.net/mshirk/6QYzD/18/
Here is my javascript and HTML
$(function () {
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: 'Value A',
data: [
[201],
[211],
[221],
[131]
]
}, {
name: 'Value B',
data: [
[192],
[202],
[212],
[122]
]
}, {
name: 'Value C',
data: [
[183],
[193],
[203],
[113]
]
}, {
name: 'Value D',
data: [
[174],
[184],
[194],
[104]
]
}]
});
});
$("#list").on('change', function () {
//alert('f')
var selVal = $("#list").val();
var selValB = $("#listb").val();
var selValBB = $("#listc").val();
if (selVal == "a" && selValB == "a" && selValBB == "a") {
chartBench.series[0].setData(
[
[201],
[211],
[221],
[131]
]);
chartBench.series[1].setData(
[
[192],
[202],
[212],
[122]
]);
chartBench.series[2].setData(
[
[183],
[193],
[203],
[113]
]);
chartBench.series[3].setData(
[
[174],
[184],
[194],
[104]
]);
} else if (selVal == "a" && selValB == "a" && selValBB == "b") {
chartBench.series[0].setData(
[
[201],
[211],
[221],
[131]
]);
chartBench.series[1].setData(
[
[192],
[202],
[212],
[122]
]);
chartBench.series[2].setData(
[
[183],
[193],
[203],
[113]
]);
chartBench.series[3].setData(
[
[174],
[184],
[194],
[104]
]);
} else if (selVal == "b" && selValB == "a" && selValBB == "a") {
chartBench.series[0].setData(
[
[201],
[211],
[221],
[131]
]);
chartBench.series[1].setData(
[
[192],
[202],
[212],
[122]
]);
chartBench.series[2].setData(
[
[183],
[193],
[203],
[113]
]);
chartBench.series[3].setData(
[
[174],
[184],
[194],
[104]
]);
} else if (selVal == "b" && selValB == "a" && selValBB == "b") {
chartBench.series[0].setData(
[
[141],
[111],
[121],
[131]
]);
chartBench.series[1].setData(
[
[132],
[102],
[112],
[122]
]);
chartBench.series[2].setData(
[
[123],
[93],
[103],
[113]
]);
chartBench.series[3].setData(
[
[114],
[84],
[94],
[104]
]);
} else if (selVal == "b" && selValB == "a" && selValBB == "a") {
chartBench.series[0].setData(
[
[201],
[211],
[221],
[131]
]);
chartBench.series[1].setData(
[
[192],
[202],
[212],
[122]
]);
chartBench.series[2].setData(
[
[183],
[193],
[203],
[113]
]);
chartBench.series[3].setData(
[
[174],
[184],
[194],
[104]
]);
} else if (selVal == "b" && selValB == "a" && selValBB == "b") {
chartBench.series[0].setData(
[
[141],
[111],
[121],
[131]
]);
chartBench.series[1].setData(
[
[132],
[102],
[112],
[122]
]);
chartBench.series[2].setData(
[
[123],
[93],
[103],
[113]
]);
chartBench.series[3].setData(
[
[114],
[84],
[94],
[104]
]);
} else if (selVal == "a" && selValB == "b" && selValBB == "a") {
chartBench.series[0].setData(
[
[151],
[251],
[221],
[231]
]);
chartBench.series[1].setData(
[
[172],
[242],
[212],
[222]
]);
chartBench.series[2].setData(
[
[183],
[233],
[203],
[213]
]);
chartBench.series[3].setData(
[
[154],
[224],
[194],
[204]
]);
} else if (selVal == "a" && selValB == "b" && selValBB == "b") {
chartBench.series[0].setData(
[
[151],
[251],
[221],
[231]
]);
chartBench.series[1].setData(
[
[172],
[242],
[212],
[222]
]);
chartBench.series[2].setData(
[
[183],
[233],
[203],
[213]
]);
chartBench.series[3].setData(
[
[154],
[224],
[194],
[204]
]);
} else if (selVal == "b" && selValB == "b" && selValBB == "a") {
chartBench.series[0].setData(
[
[151],
[251],
[221],
[231]
]);
chartBench.series[1].setData(
[
[172],
[242],
[212],
[222]
]);
chartBench.series[2].setData(
[
[183],
[233],
[203],
[213]
]);
chartBench.series[3].setData(
[
[154],
[224],
[194],
[204]
]);
} else if (selVal == "b" && selValB == "b" && selValBB == "b") {
chartBench.series[0].setData(
[
[141],
[151],
[161],
[171]
]);
chartBench.series[1].setData(
[
[132],
[142],
[172],
[162]
]);
chartBench.series[2].setData(
[
[123],
[133],
[183],
[153]
]);
chartBench.series[3].setData(
[
[114],
[124],
[194],
[144]
]);
} else {
}
});
});
<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;">
<div>1: <select id="list">
<option id="optiona" value="a" selected=yes >Option A</option>
<option id="optionb" value="b">Option B</option>
</select></div>
</div>
</div>
<div id="containerYo" style="width: 528px; height: 400px; margin: 0 auto"></div>
I am not receiving any errors and am totally stumped, any help or insight would be much appreciated!
Upvotes: 0
Views: 1046
Answers (1)
Halvor Holsten Strand
Reputation: 20536
Running your JSFiddle and changing to "Option B" and back to "Option A" does nothing simply because there is no change to the data. Both options (in the case of "Option C" and "Option E") set the data to the exact same values as the values that are present when the chart is created.
If you instead run the JSFiddle, set "Option D" and "Option F" before you start switching between "Option A" and "Option B" you will see that the code is clearly working as intended.
This can be confirmed by changing any one number in this if-branch:
if (selVal == "a" && selValB == "a" && selValBB == "a") { ...
And/or this else if-branch:
else if (selVal == "b" && selValB == "a" && selValBB == "a") { ...
As shown in this JSFiddle example, which has only changed two numbers in the described cases.
That being said, this clearly illustrates that this code needs to be tidied up.
Upvotes: 2
Related Questions
- Unable to set data for Highcharts
- Highcharts dynamic data update fails
- Highcharts SetData Only Works One Time
- HighChart : Usage of setData
- Why doesn't highcharts refresh this chart correctly?
- Updating data with Highcharts alters initial set
- Dynamic Highcharts is not updating
- Highmaps/Highcharts setData not changing
- Using setData in HighCharts multiple times
- Highchart Not Updating With Returned Ajax Data Object