EDM-1394

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<button onclick="reload()">reload</button>
<button onclick="displayCharts()">run</button>

<div id="parent">

</div>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

function reload() {
//forcing reload works
//location.reload(false);
  
  document.getElementById('parent').textContent = '';
  //chart.splice(0,chart.length);
  chart.length = 0;
}

var dps = []; // dataPoints
var chart = [];
var numCharts = 200;
var dataLength = 2000; // number of dataPoints
var dataSets = 10;

//create some data for test purposes
for(var i = 0; i < dataSets; i++){
  var xVal = 0;
	var yVal = 100;
	    for (var j = 0; j < dataLength; j++) {
	        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
	        dps.push({
	            x: xVal,
	            y: yVal,
	        });
	        xVal++;
	    };
 }

function displayCharts(){
//create charts
for(var i = 0; i < numCharts; i++){
  var div = document.createElement("div");
  div.id = "chart"+i
  div.style.height = "200px";
  div.style.width = "100%";
  div.innerHTML = i
  document.getElementById("parent").appendChild(div);
  
  chart[i] = new CanvasJS.Chart("chart"+i, {
	   zoomEnabled: true,
     title: {
	        text: "Test"
	    },
	    data: [{ showInLegend: true,type: 'line', dataPoints:dps}]
	});
  
  //	updateChart(chart[i]);
    chart[i].render();
    
    
    
    
}
}