Multiple Column Charts side by side in a Page with yAxis Scaled - CanvasJS

Multiple Column Charts side by side in a Page with yAxis Scaled - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="parentContainer" style="width: 100%;">
  <div id="mainContainer" style="float: left; width: 50%; height: 100%;"></div>
  <div id="subContainer" style="float: right; width: 50%; height: 100%;"></div>
</div>

CSS

html,
body {
  height: 100%;
}

.description {
  margin-top: 50px;
  text-align: left;
  font-family: calibri;
  font-size: 16px;
  color: gray;
}

a:link,
a:visited,
a:active {
  color: #4F81BC;
}

JavaScript

var chart1 = new CanvasJS.Chart("mainContainer", {
   data: [{
    type: "column",
    dataPoints: [{
      x: 10,
      y: 71
    }, {
      x: 20,
      y: 55
    }, {
      x: 30,
      y: 50
    }, {
      x: 40,
      y: 65
    }, {
      x: 50,
      y: 75
    }, {
      x: 60,
      y: 68
    }, {
      x: 70,
      y: 28
    }, {
      x: 80,
      y: 34
    }, {
      x: 90,
      y: 14
    }]
  }]
});
var maxValue = function(dataPoints) {
  var maximum = dataPoints[0].y;
  for (i = 0; i < dataPoints.length; i++) {
    if (dataPoints[i].y > maximum) {
      maximum = dataPoints[i].y;
    }
  }
  //return Math.round(maximum);
  return Math.ceil(maximum/10)*10;
};
var chart2 = new CanvasJS.Chart("subContainer", {
 data: [{
    type: "column",
    dataPoints: [{
      x: 10,
      y: 21
    }, {
      x: 20,
      y: 45
    }, {
      x: 30,
      y: 30
    }, {
      x: 40,
      y: 65
    }, {
      x: 50,
      y: 55
    }, {
      x: 60,
      y: 68
    }, {
      x: 70,
      y: 68
    }, {
      x: 80,
      y: 54
    }, {
      x: 90,
      y: 13
    }]
  }]
});
if(!chart1.options.axisY)
	chart1.options.axisY = {};
if(!chart2.options.axisY)
	chart2.options.axisY = {};
chart1.options.axisY.maximum = chart2.options.axisY.maximum = maxValue(chart1.options.data[0].dataPoints);
chart1.render();
chart2.render();
//