Render Charts by Class name - CanvasJS JavaScript Charts

Render Charts by Class name - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div class="charts"  style="height: 300px; width: 100%;"></div>
<div class="charts"  style="height: 300px; width: 100%;"></div>

JavaScript

var datapoints = [
    {label: "banana",y: 18}, 
    {label: "orange",y: 29},
    {label: "apple",y: 40}, 
    {label: "mango",y: 34}, 
    {label: "grape",y: 24}
];

var options = [
    {
     title: {
         text: "chart1"
     },
     data: [              
         {
         	type: "column",
         	dataPoints: datapoints
    	}
     ]
 	},
    {
     title: {
         text: "chart2"
     },
     data: [              
         {
         	type: "line",
         	dataPoints: datapoints
    	}
     ]
 	}        
];

 function renderChartsByClassName(className,options) {
     var charts = [];
     var chartClassElements = document.getElementsByClassName(className);
     for (var i = 0; i < chartClassElements.length; i++) {
         charts.push(new CanvasJS.Chart(chartClassElements[i], options[i]));
         charts[i].render();
     }
 }

// this method take the class and options array 
renderChartsByClassName("charts",options);