Dynamic Charts within JQuery Tabs with Zoom - CanvasJS JavaScript Charts

Dynamic Charts within JQuery Tabs with Zoom - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="http://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="http://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<link rel="stylesheet" href="http://canvasjs.com/assets/css/jquery-ui.1.11.2.min.css">
<div id="tabs" style="height: 600px">
	<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: 600px">
		<div id="chartContainer2" style="height: 240px; width: 100%;"></div>
    <div id="chartContainer3" style="height: 240px; width: 100%;"></div>
	</div>
</div>

JavaScript

var chart1, chart2, chart3;
var splineDataPoints = [ { y: 10 }, { y: 6 }, { y: 14 }, { y: 12 }, { y: 19 }, { y: 14 }, { y: 26 }, { y: 10 }];
var splineAreaDataPoints = [{ y: 10 }, { y: 6 }, { y: 14 }, { y: 12 }, { y: 19 }, { y: 14 }, { y: 26 }, { y: 10 }];
var options1 = {
		title: {
			text: "Spline Chart using jQuery Plugin"
		},
  	zoomEnabled: true,      
  	rangeChanged: rangechanged,      
		data: [{
			type: "spline", //change it to line, area, bar, pie, etc
			dataPoints: splineDataPoints,
		}],
    axisX: {
		}
	};
  
  var options3 = {
		title: {
			text: "Spline Chart using jQuery Plugin"
		},
  	zoomEnabled: true,      
  	rangeChanged: rangechanged,      
		data: [{
			type: "spline", //change it to line, area, bar, pie, etc
			dataPoints: splineDataPoints,
		}],
    axisX: {
		}
	};

var options2 = {
  title: {
    text: "Spline Area Chart using jQuery Plugin"
  },
  data: [{
    type: "splineArea", //change it to line, area, bar, pie, etc
    dataPoints: splineAreaDataPoints,
  }],
};

$("#tabs").tabs({
  create: function (event, ui) {
    //Render Charts after tabs have been created.
    $("#chartContainer1").CanvasJSChart(options1);
    $("#chartContainer2").CanvasJSChart(options2);
     $("#chartContainer3").CanvasJSChart(options3);
  },
  activate: function (event, ui) {
    //Updates the chart to its container's size if it has changed.
    ui.newPanel.children().first().CanvasJSChart().render();
  }
});
var yVal1 = 10, yVal2 = 10, viewportMin, viewportMax;
function rangechanged(e){
  viewportMin = e.axisX[0].viewportMinimum;
  viewportMax = e.axisX[0].viewportMaximum;
}
var updateChart = function () {
  yVal1 = yVal1 +  Math.round(5 + Math.random() *(-5-5));
  yVal2 = yVal2 +  Math.round(5 + Math.random() *(-5-5));
  splineDataPoints.push({y: yVal1});
  splineAreaDataPoints.push({y: yVal1});
  chart1 = $("#chartContainer1").CanvasJSChart();
  chart2 = $("#chartContainer2").CanvasJSChart();
  chart3 = $("#chartContainer3").CanvasJSChart();
 ...