Multiple Charts placed within dynamically created DOM / Chart-Container - CanvasJS JavaScript Charts

Multiple Charts placed within dynamically created DOM / Chart-Container - CanvasJS JavaScript Charts

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 id="chartsContainer"></div>

JavaScript

var charts = [];
var dps = [
  { 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 }
];

var chartOptions1 = {
  title: {
    text: "Chart 1"
  },
  data: [
    {
      type: "column",
      dataPoints: []
    }					
  ]
};

for(var i=0;i<5;i++){
charts.push(createChart("chartContainer"+i, chartOptions1));
}
//charts.push(createChart("chartContainer3", chartOptions1)); //Uncomment this line to add another chart

for(var i = 0; i < charts.length; i++){
charts[i].options.data[0].dataPoints.push({x : new Date(),
			y : i});
  charts[i].render();
}

function createChart(chartContainerId, chartOptions){
  var container = document.createElement('div');
  container.setAttribute("id", chartContainerId);
  container.style.cssText = "width: 100%; height: 300px";
  document.getElementById("chartsContainer").appendChild(container);

  return(new CanvasJS.Chart(chartContainerId, chartOptions));  
}