How do I update a chart to an empty data array to show that there is no data yet, then back to the ones that have data, without the javascript objects being manipulated? I get the error when the data array selected is empty.
I have done a code sample here. Clicking on either 2015, 2016 or 2017 ... no problems! However if I click 2018 which is empty, it affects the other years which should be static data.
To simulate the error:
- After load, select 2018: Shows no data to display as expected
- Select 2017: Shows 2017 data, as expected
- Select 2016: Shows 2016 data, as expected
- Select 2017: Shows 2016 data, instead of showing 2017 data. JS variable trafficinfo_data_series_2017 gets updated to 2016 data.
var trafficinfo_data_xaxis_default = [
["North America"],["European Union"],
["Asia Pacific"],
["Australia"],["Africa"]
];
var trafficinfo_data_series_default = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
$(function() {
$('#trafficinfo').highcharts({
colors: ['#cbddad', '#fac58e', '#a0ddea'],
chart: {
type: 'bar',
height: 300,
style: {
fontFamily: 'Roboto'
}
},
xAxis: {
categories: trafficinfo_data_xaxis_default,
title: {
text: 0
}
},
yAxis: {
title: {
text: 'Amount (USD Millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat((this.total), 2, '.');
}
}
},
title: {
text: 'Year 2017'
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
pointFormatter: function() {
return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
},
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
stacking: 'normal'
},
series: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
dataLabels: {
enabled: false,
format: '{point.y:,.2f}',
style: {
color: 'black',
fontWeight: 'normal'
}
}
}
},
credits: {
enabled: false
},
series: trafficinfo_data_series_default
});
});
var trafficinfo_data_xaxis_2015 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2015 = [{
"name": "American Brands",
"data": [
[41.37533669],
[0.557136],
[1.88759559],
[0.092],
[3.234]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.92798527],
[37.37533669],
[10.541969060000001],
[8.24307465],
[7.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.59301429],
[4.74857],
[18.95988396],
[6.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2016 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2016 = [{
"name": "American Brands",
"data": [
[47.92798527],
[1.95988396],
[1.38759559],
[0.95492],
[2.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.24307465],
[47.37533669],
[14.841969060000001],
[9.64307465],
[15.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.95988396],
[4.31048141],
[35.95988396],
[14.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2017 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2017 = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2018 = [];
var trafficinfo_data_series_2018 = [{
"name": "American Brands",
"data": [],
"stack": "cars"
}, {
"name": "European Brands",
"data": [],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [],
"stack": "cars"
}];
$(document).ready(function() {
$('.years input[type=radio]').on('change', function() {
var selected_year = this.value;
var chart = $('#trafficinfo').highcharts();
for (var i = 0; i < eval('trafficinfo_data_series_' + selected_year).length; i++) {
chart.series[i].setData(eval('trafficinfo_data_series_' + selected_year)[i].data);
}
chart.xAxis[0].setCategories(eval('trafficinfo_data_xaxis_' + selected_year));
chart.setTitle({
text: "Year " + selected_year
});
});
});<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div class="btn-group years" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="2015" autocomplete="off"> 2015
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2016" autocomplete="off"> 2016
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2018" autocomplete="off"> 2018
</label>
</div>
<div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>
</html>
