Home forums Using CanvasJS Charts on the same page Reply To: Charts on the same page

#7540

Anjali
Participant

chanco,

You can call this function inside the onload event handler. Please refer the below code:

<html>
<head>
<script type="text/javascript">
window.onload = function() {
	
	var dataPoints = [{ x: 10, y: 10 },{ x: 20, y: 15 },{ x: 30, y: 25 },{ x: 40, y: 30 },{ x: 50, y: 28 }];
	
	renderMyChart(chartContainer1, dataPoints);
	renderMyChart(chartContainer2, dataPoints);
	renderMyChart(chartContainer3, dataPoints);

	function renderMyChart(theDIVid, myData) {
		var chart = new CanvasJS.Chart(theDIVid, {
			data: [
			{
				type: "column",
				dataPoints: myData
			}
			]
		});
		chart.render();
	}
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer1" style="width:50%; height:300px"></div>
<div id="chartContainer2" style="width:50%; height:300px"></div>
<div id="chartContainer3" style="width:50%; height:300px"></div>
</body>
</html>

__
Anjali