Charts within JQuery Tabs with Zoom - CanvasJS JavaScript Charts

Charts within JQuery Tabs with Zoom - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<link rel="stylesheet" href="https://canvasjs.com/assets/css/jquery-ui.1.11.2.min.css">
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<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>

JavaScript

var options1 = {
		title: {
			text: "Spline Chart using jQuery Plugin"
		},
                animationEnabled: true,
      zoomEnabled: 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"
		},
      zoomEnabled: true,
		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();
		}
	});