Change trigger when selecting a dataset [Amcharts Multiple Data Sets diagram]

Question

Is it possible to initiate a “change” on the select element in the diagram of the Amcharts dataset they provided.?

$(".amChartsDataSetSelector").find("select").val("2").trigger("change"); 

This is the code I tried, basically it is to change the selection parameter to the one I selected , but does not change the diagram accordingly .

Are there any other alternatives for this method?

Here is my fiddle :

Here's the original link to the chart on amber.

Answer 1

jQuery .trigger( only works when events are connected using the jQuery .on function (or any event binding function). The following is a simple example to show you what is happening.

Go to #Solution below to skip this demo.

 $(function() { var el = document.getElementById('checkEvent'); if (el.addEventListener) { el.addEventListener("change", checkEvent, false); } else { el.attachEvent('change', checkEvent); } function checkEvent() { alert('Event Check'); } $('#changeDDValue').click(function() { $('#checkEvent').val("2").change(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="checkEvent" style="width: 180px;"> <option value="0">first data set</option> <option value="1">second data set</option> <option value="2">third data set</option> <option value="3">fourth data set</option> </select> <button id="changeDDValue">Change DataSet</button> 

Decision:

Added #change button to install another dataset, as shown below,

 $('#change').click(function () { var selectEl = $(".amChartsDataSetSelector").find("select").val("2").get(0); fireEvent.call(selectEl, 'change'); }); 

And then use the fireEvent function below to trigger the change event instead of trigger('change') ,

 //http://stackoverflow.com/a/2490876/297641 function fireEvent(eventName) { var event; // The custom event that will be created if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventName, true, true); } else { event = document.createEventObject(); event.eventType = eventName; } event.eventName = eventName; if (document.createEvent) { this.dispatchEvent(event); } else { this.fireEvent("on" + event.eventType, event); } } 

Fixed jsFiddle