JavaScript Chart - JQuery Integration JQuery tab integration with KoolChart

VIEW MORE FEATURES
SAVE
VIEW HTML
EDIT ON CODEPEN
This JavaScript chart example shows how to integrate the jQuery UI tabs plugin with KoolChart.
<div id="jqueryTabs">
<ul>
<li class="li_select"><a href="#chartHolder1">chart1</a></li>
<li><a href="#chartHolder2">chart2</a></li>
<li><a href="#chartHolder3">chart3</a></li>
</ul>
<div id="chartHolder1" style="width:850px;height:400px;"></div>
<div id="chartHolder2" style="width:850px;height:400px;"></div>
<div id="chartHolder3" style="width:850px;height:400px;"></div>
</div>

$(document).ready(function() {
$("#jqueryTabs").tabs();
$("#jqueryTabs > ul").click(function(event) {
var i, a, as, content,
tagName = event.target.tagName.toLowerCase();

if (tagName == "a" || tagName == "li") {
as = $("#jqueryTabs a");
for (i = 0 ; i < as.length ; i += 1) {
a = as[i];
$(a.parentNode).removeClass("li_select");
content = a.innerHTML;

if (content == event.target.innerHTML) {
$(a.parentNode).addClass("li_select");

/*
Investigate whether a chart has been created.
*/
if (!document.getElementById(content))
KoolChart.create(content, "chartHolder" + content.replace(/\D/g, ""), chartVars, "100%", "100%");
}
}
}
});
});