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:

And here's the code to toggle a chart:

$(document).on('click', '.chart-update', function() {
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: