Multiple Charts Next To Each Other from array- CanvasJS JavaScript Charts

Multiple Charts Next To Each Other from array- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 200px; width: 50%; float: left"></div>
<div id="chartContainer2" style="height: 200px; width: 50%; float: left"></div>

JavaScript

var data1 = [
	{x: new Date(2016, 06, 15), y: 13},
  {x: new Date(2016, 07, 15), y: 15},
  {x: new Date(2016, 08, 15), y: 15},
  {x: new Date(2016, 09, 15), y: 19},
  {x: new Date(2016, 10, 15), y: 9},
  {x: new Date(2016, 11, 15), y: 11},
  {x: new Date(2017, 00, 15), y: 23},
  {x: new Date(2017, 01, 15), y: 17},
  {x: new Date(2017, 02, 15), y: 11}
];

var data2 = [
	{x: new Date(2017, 00, 15), y: 23},
  {x: new Date(2017, 01, 15), y: 28},
  {x: new Date(2017, 02, 15), y: 22},
  {x: new Date(2017, 03, 15), y: 19},
  {x: new Date(2017, 04, 15), y: 32},
  {x: new Date(2017, 05, 15), y: 24},
  {x: new Date(2017, 06, 15), y: 16},
  {x: new Date(2017, 07, 15), y: 18},
  {x: new Date(2017, 08, 15), y: 32},
  {x: new Date(2017, 09, 15), y: 32},
  {x: new Date(2017, 10, 15), y: 22},
  {x: new Date(2017, 11, 15), y: 26},
];

var chart1 = new CanvasJS.Chart("chartContainer1",
{        
	data: [
	{
		type: "bar",
		dataPoints: data1
	}					
	]
});

chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2",
{        
	data: [
	{
		type: "bar",
		dataPoints: data2
	}					
	]
});

chart2.render();