Number of Data-Series in chart according to value selected in Dropdown | CanvasJS JavaScript Charts

Number of Data-Series in chart according to value selected in Dropdown | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div>
     Select number of series   <select id="numberOfSeries">
     <option>--Select--</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>      
    </select>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataSeries = [{
  type: "line",
  showInLegend: true,
  dataPoints: [
    { x: 10, y: 71 },
    { x: 20, y: 55 },
    { x: 30, y: 50 },
    { x: 40, y: 65 },
    { x: 50, y: 92 },
    { x: 60, y: 68 },
  ]
}, {
  type: "line",
  showInLegend: true,
  dataPoints: [
    { x: 10, y: 10 },
    { x: 20, y: 25 },
    { x: 30, y: 40 },
    { x: 40, y: 55 },
    { x: 50, y: 20 },
    { x: 60, y: 5 },
  ]
}, {
  type: "line",
  showInLegend: true,
  dataPoints: [
    { x: 10, y: 30 },
    { x: 20, y: 50 },
    { x: 30, y: 60 },
    { x: 40, y: 55 },
    { x: 50, y: 15 },
    { x: 60, y: 10 },
  ]
}, {
  type: "line",  
  showInLegend: true,
  dataPoints: [
    { x: 10, y: 80 },
    { x: 20, y: 45 },
    { x: 30, y: 70 },
    { x: 40, y: 40 },
    { x: 50, y: 35 },
    { x: 60, y: 20 },
  ]
}];

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
  title:{
    text:"Number of Data-Series according to Value in Dropdown"
  },
  subtitles: [{
  	text: "Select the value from Dropdown"
  }],
  data: []
});

chart.render();

document.getElementById("numberOfSeries").addEventListener( "change",  updateNumberOfDataSeries);

function updateNumberOfDataSeries() {
  var numberOfSeries = Number(document.getElementById("numberOfSeries").value);
  chart.options.data = [];
  if(!isNaN(numberOfSeries))
    for( var i = 0; i < numberOfSeries; i++){
      chart.options.data.push(dataSeries[i]);	
    }
  chart.render();
}