Home forums Using CanvasJS Displays many graphics on the same page

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 2 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #7537

    chanco
    Participant

    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>

    #7539

    Anjali
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.