prax prax - 1 month ago 14
jQuery Question

Making Javascript button toggle function work with dropdown selection

I am a complete newbie in the of world JavaScript, HTML and CSS. I have an HTML page with several charts created using Highcharts. The page has a dropdown menu containing a list of Indian states. When a state is selected, all the charts are updated with data for this state. Each chart has a set of 2 buttons attached (see the fiddle link). On toggling the buttons, different charts are loaded.

Now the issue: I need to make both these functionalities work together. That is, when I select "Andhra Pradesh", data for Andhra Pradesh should be loaded on both the charts. I was able to make the charts load respective data for states for "2017-18" but couldn't for "Other Years". Can't fathom what is going wrong. Here's a link to the fiddle: https://jsfiddle.net/Pr4chi/w9nq1cw3/110/

And here's the code to toggle a chart:

$(document).on('click', '.chart-update', function() {
$('button').removeClass('selected');
$(this).addClass('selected');
chart.destroy();
$('#donut').highcharts(chartOptions[$(this).data('chartName')]);
chart = $('#donut').highcharts();
});


Any help is deeply appreciated!

Answer Source

You can bind change event to the select element and based on which state is chosen, update chart series' data. Take a look at the example below. I added some dummy data (check dataForStates object) to show you how it works.

API Reference:
http://api.highcharts.com/highcharts/Series.update
http://api.highcharts.com/highcharts/Series.setData
https://api.jquery.com/change/

Example:
https://jsfiddle.net/vwyrwz61/