How to load new charts from option in canvasjs?

Question

I want to load the chart according to the selection of chart from dropdown list.

Suppose when pie is clicked then data should be display in pie chart and when column is clicked then data should be dispaly in column chart and so on.

I am trying like this :-

<script>
$(function()
{ 
       var barChart = new CanvasJS.Chart("barChartContainer", 
        {
            animationEnabled: true,
            theme: "light2",
            title:
            {
                text: "Gender wise Employees Length",
                fontSize: 20,
                fontFamily: "Trebuchet MS",
                fontWeight: "bold",
                margin: 10
            },
            axisY :{
                title: "Number of Employees"
            },
            data: [{        
                type: "funnel",  // column pie funnel line
                dataPoints: [                                           
                    { y: ${male}, label: "MALE" },                   
                    { y: ${female},  label: "FEMALE" }                  
                    ] 
                  }]
        });

       barChart.render(); 

       }
});
</script>
<div class="card shadow p-1 bg-white rounded">
    <div class="card-body">
        <div class="dropdown mr-20">
            <img src="${pageContext.request.contextPath}/resources/images/list.png" alt="edit" class="image dropdown-toggle" data-toggle="dropdown"/>
            <div class="dropdown-menu">
                <a class="dropdown-item" id="pie" href="#">Pie</a>
                <a class="dropdown-item" id="bar" href="#">Bar</a>
                <a class="dropdown-item" id="funnel" href="#">Funnel</a>
            </div>
        </div>
        <div id="barChartContainer" style="height: 240px; width: 100%;"></div>
    </div>
</div>
<script>
    $("#pie").click(function()
    {
         alert("Pie was clicked.");
    });
    $("#bar").click(function()
    {
         alert("Bar was clicked."); 
    });
    $("#funnel").click(function()
    {
         alert("Funnel was clicked.");
    });
</script>

Answer 1

after render has been called,
we can access the data series type as follows...

barChart.options.data[0].type = 'pie';

rather than have three separate click events,
assign one click event to the drop down class.
then use the id of the element clicked to set the chart type...

$(".dropdown-item").click(function(e) {
  barChart.options.data[0].type = e.target.id;
  barChart.render();
});

see following working snippet...

$(function() {
  var barChart = new CanvasJS.Chart("barChartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Gender wise Employees Length",
      fontSize: 20,
      fontFamily: "Trebuchet MS",
      fontWeight: "bold",
      margin: 10
    },
    axisY: {
        title: "Number of Employees"
    },
    data: [{
      type: "funnel",
      dataPoints: [
        {y: 10, label: "MALE"},
        {y: 10, label: "FEMALE"}
      ]
    }]
  });

  barChart.render();

  $(".dropdown-item").click(function(e) {
    barChart.options.data[0].type = e.target.id;
    barChart.render();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="card shadow p-1 bg-white rounded">
  <div class="card-body">
    <div class="dropdown mr-20">
      <div class="dropdown-menu">
        <a class="dropdown-item" id="pie" href="#">Pie</a>
        <a class="dropdown-item" id="bar" href="#">Bar</a>
        <a class="dropdown-item" id="funnel" href="#">Funnel</a>
      </div>
    </div>
    <div id="barChartContainer" style="height: 240px; width: 100%;"></div>
  </div>
</div>