Charts within jQuery Resizable div and jQuery Tabs - CanvasJS JavaScript Charts

Charts within jQuery Resizable div and jQuery Tabs - CanvasJS JavaScript Charts

by canvasjs

HTML

<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-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="resizable" style="height: 360px">
<div id="tabs" style="height: 100%">
<ul>
<li ><a href="#tabs-1" style="font-size: 12px">Graph1</a></li>
<li ><a href="#tabs-2"  style="font-size: 12px">Graph2</a></li>
<li ><a href="#tabs-3"  style="font-size: 12px">Graph3</a></li>
</ul>
<div id="tabs-1" style="height: 100%">
<div id="chartContainer1" style="height: 80%; width: 100%;"></div>
</div>
<div id="tabs-2" style="height: 100%">
<div id="chartContainer2" style="height: 80%; width: 100%;"></div>
</div>
<div id="tabs-3" style="height: 100%">
<div id="chartContainer3" style="height: 80%; width: 100%;"></div>
</div>
</div>
</div>

<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>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

JavaScript

window.onload = function() {
var options1 = {
	animationEnabled: true,
	title: {
		text: "First graph"
	},
	axisX: {
		labelFontSize: 14
	},
	axisY: {
		labelFontSize: 14
	},
	data: [{
		type: "column", //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: "Second graph"
	},
	axisX: {
		labelFontSize: 14
	},
	axisY: {
		labelFontSize: 14
	},
	data: [{
		type: "splineArea", //change it to line, area, bar, pie, etc
		dataPoints: [
			{ y: 20 },
			{ y: 6 },
			{ y: 14 },
			{ y: 12 },
			{ y: 19 },
			{ y: 14 },
			{ y: 26 },
			{ y: 10 },
			{ y: 22 }
		]
	}]
};

var options3 = {
	title: {
		text: "Third graph"
	},
	axisX: {
		labelFontSize: 14
	},
	axisY: {
		labelFontSize: 14
	},
	data: [{
		type: "splineArea", //change it to line, area, bar, pie, etc
		dataPoints: [
			{ y: 40 },
			{ y: 6 },
			{ y: 14 },
			{ y: 12 },
			{ y: 19 },
			{ y: 14 },
			{ y: 26 },
			{ y: 10 },
			{ y: 22 }
		]
	}]
};

$("#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 size if it has changed.
		ui.newPanel.children().first().CanvasJSChart().render();
	}
});

$("#resizable").resizable({
	create: function (event, ui) {
		//Create chart.
		$("#chartContainer1").CanvasJSChart(options1);
		$("#chartContainer2").CanvasJSChart(options2);
		$("#chartContainer3").CanvasJSChart(options3);
	},
	resize: function (event, ui) {
		//Update chart size according to its container size.
		$("#chartContainer1").CanvasJSChart().render();
		$("#chartContainer2").CanvasJSChart().render();
		$("#chartContainer3").CanvasJSChart().render();
	}
});


}