c3.js donut chart onclick function

I have created a C3js donut chart in my website, I have assigned a onclick function in the chart and I'd like to have a button to fire the function too but, I cannot figure any good approach to do it.

I tried to create a button in order to fire the function like below, find the element and bind it to my .onclick() function:

  $("#test").click(function(){
        $(".c3-arc-data2").click();
  });

But it doesn't work.

Please see the example in the fiddleJS:https://jsfiddle.net/mcd6ucge/52/

Extension:

I have an if statement for the section, which will change the data of the chart and when the data has been alter to another case the onclick function is not working

    if(x = "something"){
        $(".uldateBtn1").html(
        '<li id="test-fliter" class="dateBtn hvr-underline-from-left" style="margin-top:10px !important;">test</li>'
                                )

        $("#test-fliter").click(function(){

          var evt = new MouseEvent("click");//make a mouse event
          d3.select(".c3-arc-test").node().dispatchEvent(evt);

         });
    }

else{
 $(".uldateBtn1").html(
    '<li id="test2-fliter" class="dateBtn hvr-underline-from-left" style="margin-top:10px !important;">test</li>'
                            )

    $("#test2-fliter").click(function(){

      var evt = new MouseEvent("click");//make a mouse event
      d3.select(".c3-arc-test2").node().dispatchEvent(evt);

     });

}

The if is working fine but the else is not working.

Answers 1

  • Do it like this

      $("#test").click(function(){
        var evt = new MouseEvent("click");//make a mouse event
        //dispatch the event on the element.
        d3.select(".c3-arc-data1").node().dispatchEvent(evt);
     });
    

    working code here


Related Articles