Multiple Chart in a Page - CanvasJS JavaScript Chart

Multiple Chart in a Page - CanvasJS JavaScript Chart

by canvasjs

HTML

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="width: 400px; height: 300px;float:left;"></div> 
<div id="chartContainer2" style="width: 400px; height: 300px;"></div> </br>
<div id="chartContainer3" style="width: 400px; height: 300px;float:left;"></div>
<div id="chartContainer4" style="width: 400px; height: 300px;"></div>

JavaScript

window.onload = function(){
    var chart = new CanvasJS.Chart("chartContainer1",
        {
            animationEnabled: true,
            title: {
                text: "Spline Area Chart"
            },
            axisX: {
                interval: 10,
            },
            data: [
            {
                type: "splineArea",
                color: "rgba(255,12,32,.3)",
                type: "splineArea",
                dataPoints: [
                    { x: new Date(1992, 0), y: 2506000 },
                    { x: new Date(1993, 0), y: 2798000 },
                    { x: new Date(1994, 0), y: 3386000 },
                    { x: new Date(1995, 0), y: 6944000 },
                    { x: new Date(1996, 0), y: 6026000 },
                    { x: new Date(1997, 0), y: 2394000 },
                    { x: new Date(1998, 0), y: 1872000 },
                    { x: new Date(1999, 0), y: 2140000 },
                    { x: new Date(2000, 0), y: 7289000 },
                    { x: new Date(2001, 0), y: 4830000 },
                    { x: new Date(2002, 0), y: 2009000 },
                    { x: new Date(2003, 0), y: 2840000 },
                    { x: new Date(2004, 0), y: 2396000 },
                    { x: new Date(2005, 0), y: 1613000 },
                    { x: new Date(2006, 0), y: 2821000 }
                ]
            },
            ]
        });
    chart.render();

    var chart = new CanvasJS.Chart("chartContainer2",
        {
            animationEnabled: true,
            title: {
                text: "Pie Chart",
            },
            data: [
            {
                type: "pie",
                showInLegend: true,
                dataPoints: [
                    { y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
                    { y: 2175498, legendText: "Wii", indexLabel: "Wii" },
                    { y: 3125844, legendText: "360", indexLabel: "Xbox 360" },
                    { y: 1176121, legendText: "DS",...