Charts within jQuery Tabs - CanvasJS JavaScript Charts

Charts within jQuery Tabs - 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">
	<ul style="font-size: 20px;">
		<li><a href="#tabs-1" data-tab="1">Info</a></li>
		<li><a href="#tabs-2" data-tab="2">Data</a></li>
		<li><a href="#tabs-3" data-tab="3">Charts</a></li>
	</ul>
	<!-- Start Tab 1 -->
	<div id="tabs-1" data-content="1">
		<p>info here</p>
	</div>
	<!-- End Tab 1 -->
	<!-- Start Tab 2 -->
	<div id="tabs-2" data-content="2">
		<table id="data_table" class="table_a smpl_tbl">
			<thead>
				<tr style="font-size:small; font-weight: bold;">
					<td>Response</td>
					<td>Completed Date</td>
					<td></td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>Response</th>
					<th>Completed Date</th>
					<th></th>
				</tr>
			</tfoot>
		</table>
	</div>
	<!-- End Tab 2 -->
	<!-- Start tab 3-->
	<div id="tabs-3" data-content="3">
		<div id="chartContainer1" style="width: 100%; height: 370px;"></div>
		<br />
		<div id="chartContainer2" style="width: 100%; height: 400px;"></div>
	</div>
	<!-- End tab 3-->
</div>

JavaScript

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

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 }
		]
	}]
};
var charts = [];
var charts2 = [];


$(function () {
	$("#tabs").tabs()
	.on('tabsactivate', function (event, ui) {
		var index = ui.newTab.index();
		chart1.render();
		chart2.render();
	});
});

var chart1 = new CanvasJS.Chart("chartContainer1", options1);
var chart2= new CanvasJS.Chart("chartContainer2", options2);

chart1.render();
charts.push(chart1);

chart2.render();
charts2.push(chart2);