Chart Options based on Radio Buttons - CanvasJS JavaScript Charts

Chart Options based on Radio Buttons - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div>
    Please select your preferred Chart:<br/>
    <input type="radio" name="chart" value="Chart1" checked>Chart1<br>
    <input type="radio" name="chart" value="Chart2">Chart2<br>
</div>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {});
var option1 = {
  title:{
    text: "Chart 1"
  },
  data: [{
    type: "column",
    dataPoints: [
      { label: "apple",  y: 10  },
      { label: "orange", y: 15  },
      { label: "banana", y: 25  },
      { label: "mango",  y: 30  },
      { label: "grape",  y: 28  }
    ]
  }]
};
var option2 = {
  title:{
    text: "Chart 2"
  },
  axisY: {
    includeZero: false
  },
  data: [{
    type: "line",
    dataPoints: [
      { x: 1, y: 450 },
      { x: 2, y: 414 },
      { x: 3, y: 520 },
      { x: 4, y: 460 },
      { x: 5, y: 450 }
    ]
  }]
};

if($('input[name=chart]').is(':checked')) {
  drawChart(option1);    
}

$('input:radio[name=chart]').change(function() {
  if(this.value == 'Chart1'){
    drawChart(option1); 
  }
  else if(this.value == 'Chart2') {
    drawChart(option2); 
  }
});

function drawChart(options) {
  chart.options = options;
  chart.render();
}