You must be logged in to post your query.
Home › Forums › Chart Support › How to change dataPoints axisY Y value dynamically
Tagged: Canvas js, jquery
This is column bar chart. That is working perfectly. I want to change dataPoints axisY Y value dynamically. that will be change by the select html. like while user select the USA dataPoints axisY, Y value will be 111338, this value is amount. i will do by this jQuery. How to do this.
I was try to following like this. that is showing error. How to pass the vale? anyone can help me.
<select id=”country” id=”country” class=”textfield”>
<option selected> Select a Province</option> <option> Bangladesh</option> <option> USA</option> <option> UK</option> <option> India</option> <option> Pakistan </option>
</select>
dataPoints: [ { y: <div id=’usa’></div>, label: “USA” }, { y: 107922, label: “UK” }, { y: 107453, label: “Bangladesh” }, { y: 107986, label: “india” }, { y: 107233, label: “india” }, ]
@rashedk,
To update the y value of a datapoint using a dropdown menu you need to update the chart options / data based on the options selected from the dropdown list. Please check the code snippet below.
var country = document.getElementById("country"); country.addEventListener( "change", function(){ for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) { if(country.options[country.selectedIndex].text === chart.options.data[0].dataPoints[i].label) chart.options.data[0].dataPoints[i].y = Number(country.options[country.selectedIndex].value); } chart.render(); });
Please take a look at this JSFiddle for a working example.
— Thangaraj Raman Team CanvasJS
You must be logged in to reply to this topic. Login/Register