Hi all,
I am try to insert to different graphics on the same html page but it doesn’t work.
Just display one graph.
Could you please give me help.
Here is the code i managed.
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
fontFamily: “arial black”
},
legend: {
verticalAlign: “bottom”,
horizontalAlign: “center”
},
theme: “theme1”,
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();
}
</script>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer2”, {
theme: “theme2”,//theme1
title:{
},
data: [
{
// Change type to “bar”, “splineArea”, “area”, “spline”, “pie”,etc.
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>