Home › Forums › Chart Support › Displays many graphics on the same page › Reply To: Displays many graphics on the same page

November 22, 2014 at 2:58 pm #7539

Anjali

Chanco,

The first onload event handler is being replaced by the second one and hence only one chart is getting created. Instead of assigning event handler twice, you should create both charts inside the same event handler as shown below.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		data: [
		{
			type: "pie",
			indexLabelFontFamily: "Garamond",
			indexLabelFontSize: 20,
			indexLabelFontWeight: "bold",
			startAngle:0,
			indexLabelFontColor: "MistyRose",
			indexLabelLineColor: "darkgrey",
			indexLabelPlacement: "inside",
			toolTipContent: "{name}: {y} systems",
			showInLegend: true,
			indexLabel: "#percent%",
			dataPoints: [
				{ y: 126, name: "Technical", legendMarkerType: "triangle"},
				{ y: 24, name: "Institional", legendMarkerType: "square"},
				{ y: 15, name: "Website", legendMarkerType: "circle"}
			]
		}
		]
	});
	chart.render();

	var chart = new CanvasJS.Chart("chartContainer2", {
		data: [
		{
			type: "column",
			dataPoints: [
				{ label: "End Users", y: 3808 },
				{ label: "Servers", y: 427 },
				{ label: "Network", y: 618 }
			]
		}
		]
	});
	chart.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 50%;"></div>
<div id="chartContainer2" style="height: 300px; width: 50%;"></div>
</body>
</html>

__
Anjali