How to change dataPoints axisY Y value dynamically

[rashedk]

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” },
]

• This topic was modified 2 years ago by rashedk.

[Thangaraj Raman]

@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