Change Chart type from dropdown - CanvasJS JavaScript Charts

Change Chart type from dropdown - CanvasJS JavaScript Charts

by sunil puvvada

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

<div>Chart Type:
  <select id="chartType" name="Chart Type">
    <option value="line">Line</option>
    <option value="column">Column</option>
    <option value="bar">Bar</option>
    <option value="pie">Pie</option>
    <option value="doughnut">Doughnut</option>
  </select>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {

  data: [{
    type: "line",
    dataPoints: [{
      x: 10,
      y: 71
    }, {
      x: 20,
      y: 55
    }, {
      x: 30,
      y: 50
    }, {
      x: 40,
      y: 65
    }, {
      x: 50,
      y: 95
    }, {
      x: 60,
      y: 68
    }, {
      x: 70,
      y: 28
    }, {
      x: 80,
      y: 34
    }, {
      x: 90,
      y: 14
    }]
  }]
});

chart.render();

var chartType = document.getElementById('chartType');
chartType.addEventListener("change", function() {
  chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;
  chart.render();
});