Charts & Graphs inside jQuery UI Tabs

Download jQuery Chart Samples

Charts can easily be integrated with jQuery UI Tabs and other common elements like Dialog, Accordion, etc. jQuery Library supports 30 different Chart types including line, bar, pie, funnel, area, etc. Below example demonstrates Spline & Spline Area Charts inside jQuery UI Tabs. It also includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function() {
var options1 = {
	animationEnabled: true,
	title: {
		text: "Spline Chart using jQuery Plugin"
	},
	axisX: {
		labelFontSize: 14
	},
	axisY: {
		labelFontSize: 14
	},
	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"
	},
	axisX: {
		labelFontSize: 14
	},
	axisY: {
		labelFontSize: 14
	},
	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 }
		]
	}]
};

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

}

Chart Customizations

You can change the type of chart to any other chart like line or column using type property. You can also add indexLabel for each dataPoint to show some additional information. Some other commonly used customizations include lineColor, dataPointWidth, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial