Home Forums Chart Support How to change dataPoints axisY Y value dynamically

How to change dataPoints axisY Y value dynamically

Viewing 2 posts - 1 through 2 (of 2 total)
  • #39675

    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 weeks, 1 day ago by rashedk.
    #39765

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.