Multiple Charts in a Page - CanvasJS JavaScript Charts

Multiple Charts in a Page - CanvasJS JavaScript Charts

by canvasjs

HTML

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div> 
<div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div><br/>
<div id="chartContainer3" style="width: 45%; height: 300px;display: inline-block;"></div>
<div id="chartContainer4" style="width: 45%; height: 300px;display: inline-block;"></div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
  animationEnabled: true,
  title: {
    text: "Spline Area Chart"
  },
  axisX: {
    interval: 10,
  },
  data: [
    {
      type: "splineArea",
      color: "rgba(255,12,32,.3)",
      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 }
      ]
    },
  ]
});
chart1.render();

var chart2 = 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", indexLabel: "Nintendo DS" },
        { y: 1727161, legendText: "PSP", indexLabel: "PSP" },
        { y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
        { y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
      ]
    },
  ]
});
chart2.render();

var chart3 = new CanvasJS.Chart("chartContainer3", {
  animationEnabled: true,
  title: {
    text: "Line Chart"
  },
  axisX: {
    valueFormatString: "MMM",
    interval: 1,
    intervalType: "month"
  },
  axisY: {
    includeZero: false
  },
  data: [
    {
      type: "line",
      dataPoints:...