Creating N-Number of Charts Dynamically based on User Input | CanvasJS JavaScript Charts

Creating N-Number of Charts Dynamically based on User Input | 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 -->

<label for="select-number-charts">Select Number of Charts to be created: </label>

<select id="select-number-charts">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="chartContainers">
</div>

JavaScript

var charts = [];
var options = {
  title:{
    text: "Basic Column Chart"
  },
  data: [{				
    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}
    ]
  }]
}

jQuery("#select-number-charts").on("change", function() {
  var containerParent = jQuery("#chartContainers");
  containerParent.empty();
  charts = [];
  for(var i=0; i<Number(jQuery(this).val()); i++) {
    containerParent.append("<div id='chart-container"+i+"' style='width: 100%;height: 360px;'><\/div>")
    charts.push(new CanvasJS.Chart('chart-container'+i, options));
    charts[i].render();
  }
});