JSFiddle - React, Tailwind, and code Playground
HTML
<script src="highcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<input type="button" id="btn" value="trigger draw"/>
<div id="results"></div>
<div id="dashboardDataDiv" class="content">
<div id="graphContainer0"> empty </div>
<div id="graphContainer1"> empty </div>
<div id="graphContainer2"> empty </div>
<div id="graphContainer3"> empty </div>
<div id="graphContainer4"> empty </div>
<div id="graphContainer5"> empty </div>
<div id="graphContainer6"> empty </div>
<div id="graphContainer7"> empty </div>
<div id="graphContainer8"> empty </div>
<div id="graphContainer9"> empty </div>
<div id="graphContainer10"> empty </div>
<div id="graphContainer11"> empty </div>
<div id="graphContainer12"> empty </div>
<div id="graphContainer13"> empty </div>
<div id="graphContainer14"> empty </div>
</div>
JavaScript
$('#btn').on("click", function() {
var i;
var start = new Date().getTime();
var res = '';
var tmp = '';
var graphDivSelector;
for(i = 0; i < 15; i++ ) {
graphDivSelector = $("div[id='graphContainer" + i + "']");
graphDivSelector.empty();
var startG = new Date().getTime();
//console.log($(graphDivSelector));
graphDivSelector.highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5]
}, {
name: 'London',
data: [48.9, 38.8, 39.3]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5]
}]
});
tmp = '[DrawGraph ' + i + '] Execution time: ' + (new Date().getTime() - startG);
console.log(tmp);
res += tmp + '<br>';
}
tmp = '[DrawAllGraphs] Execution time: ' + (new Date().getTime() - start);
console.log(tmp);
res += tmp + '<br>';
$("#results").empty();
$("#results").append(res);
});
$('#btn').trigger("click");