Update chart type according to the selected value of drop down - CanvasJS

Update chart type according to the selected value of drop down - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <select id="chartType">
     <option>Select Chart Type</option>
     <option>line</option>
     <option>pie</option>
     <option>area</option>
     <option>bar</option>
 </select>
<div id="chartContainer" style="width: 100%; height: 300px"><div>

JavaScript

var chart;
chart = new CanvasJS.Chart("chartContainer",
	{
      axisX: {
        interval: 1
      },
      title: {
        text: "Basic column chart"
      },
      data: [
      {
        type: "column",
        dataPoints: [
            { y: 12 },
            { y: 23 },
            { y: 14 },
            { y: 25 },
            { y: 36 },
            { y: 1  }
        ]
      }
      ]
    });
 chart.render();

$("#chartType").change(function () {     
    var selectedChartType = $("#chartType option:selected").text();
    chart.options.data[0].type = selectedChartType;
    chart.options.title.text = "Basic" +" "+ selectedChartType +" "+ "chart";
    chart.render();
})