I want to combine both the zoom function and tab function. However I realize that every time the graph is rendered, the div chartContainer1 is focused hence making the zoom to disappear. I am wondering is there any different way to work around the example given. I just started using canvasJS still not very familiar with it.
As for the code, copy paste it into canvasjs editor instead of jsfiddle. Somehow I can’t get jsfiddle to work properly. Thank you very much. I hope my explanation is good enough to be understood.
<!DOCTYPE HTML>
<html>
<head>
<link href="/assets/css/jquery-ui.1.11.2.min.css" rel="stylesheet" />
<script type="text/javascript" src="/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery-ui.1.11.2.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(function () {
//Better to construct options first and then pass it as a parameter
var options1 = {
zoomEnabled: true,
title: {
text: "Spline Chart using jQuery Plugin"
},
animationEnabled: true,
data: [
{
type: "spline", //change it to line, area, bar, pie, etc
dataPoints: [
{ y: 10 },
{ y: 6 },
{ y: 14 },
{ y: 12 },
{ y: 19 },
{ y: 14 },
{ y: 26 },
{ y: 10 },
{ y: 22 }
]
}
],
axisX: {
labelFontSize: 14
},
axisY: {
labelFontSize: 14
}
};
var options2 = {
title: {
text: "Spline Area Chart using jQuery Plugin"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [
{ y: 10 },
{ y: 6 },
{ y: 14 },
{ y: 12 },
{ y: 19 },
{ y: 14 },
{ y: 26 },
{ y: 10 },
{ y: 22 }
]
}
],
axisX: {
labelFontSize: 14
},
axisY: {
labelFontSize: 14
}
};
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container's size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
function updateChart(){
$("#chartContainer1").CanvasJSChart(options1).render;
}
setInterval(function(){updateChart()}, 15000);
});
</script>
</head>
<body>
<div id="tabs" style="height: 290px">
<ul>
<li ><a href="#tabs-1" style="font-size: 12px">Spline</a></li>
<li ><a href="#tabs-2" style="font-size: 12px">Spline Area</a></li>
</ul>
<div id="tabs-1" style="height: 225px">
<div id="chartContainer1" style="height: 240px; width: 100%;"></div>
</div>
<div id="tabs-2" style="height: 225px">
<div id="chartContainer2" style="height: 240px; width: 100%;"></div>
</div>
</div>
</body>
</html>