jQuery Charts & Graphs inside jQueryUI Popup Modal

Charts can easily be integrated with jQuery UI Popup Modals and other common elements like Tabs, Accordions, etc. Given example shows Column Chart in Popup Modal using CanvasJS jQuery plugin. It also includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	animationEnabled: true,
	title: {
		text: "GDP Growth Rate - 2016"
	},
	axisY: {
		title: "Growth Rate (in %)",
		suffix: "%",
		includeZero: false
	},
	axisX: {
		title: "Countries"
	},
	data: [{
		type: "column",
		yValueFormatString: "#,##0.0#"%"",
		dataPoints: [
			{ label: "Iraq", y: 10.09 },	
			{ label: "T & C Islands", y: 9.40 },
			{ label: "Nauru", y: 8.50 },
			{ label: "Ethiopia", y: 7.96 },	
			{ label: "Uzbekistan", y: 7.80 },
			{ label: "Nepal", y: 7.56 },
			{ label: "Iceland", y: 7.20 }
		]
	}]
};


$("#showChart").click(function() {
	
	$("#dialogBox").dialog({
		open: function(event,ui) {
			$(".ui-widget-overlay").bind("click", function(event,ui) {         
				$("#dialogBox").dialog("close");
			});
		},
		closeOnEscape: true,
		draggable: false,
		resizable: false,
		title: "GDP Growth Rate",
		width: 700,
		modal: true,
		show: 500
	});
	$(".ui-widget-overlay").css({"background-color": "#111111"});
	$("#chartContainer").CanvasJSChart(options);
});

}

Related Customization

You can enable exporting of garph by setting the exportEnabled. Also, the name of the exported file can be set using exportFileName property. Other commonly used customization options are animationEnabled, color, zoomEnabled, etc.