jQuery Charts

Use the FusionCharts jQuery plugin to add interactive jQuery charts to your web and mobile applications. Choose from any of the charts, gauges or maps in the comprehensive FusionCharts product suite and integrate using the easy-to-use jQuery syntax.

*You will need FusionCharts Suite XT to create charts using this plugin. If you haven’t downloaded it already, download it here.

Getting Started

Get started with creating charts in jQuery using the simple code samples below. To view detailed functionality and the complete API click here.


Example 1: Creating a chart with multiple data series

$("#chartContainer2").insertFusionCharts({
	type: "MSColumn2D",
	width: "600",
	height: "300",
	dataFormat: "json",
	dataSource: {
	   "chart":{
		  "caption":"Sales by Country",
		  "bgcolor":"ffffff,ffffff",
		  "showlabels":"1",
		  "showvalues":"0",
		  "showborder":"0",
		  "decimals":"0",
		  "theme": "fint",
		  "numberprefix":"$"
	   },
	   "categories":[
		  {
			 "category":[
				{
				   "label":"Austria"
				},
				{
				   "label":"Brazil"
				},
				{
				   "label":"France"
				},
				{
				   "label":"Germany"
				},
				{
				   "label":"USA"
				}
			 ]
		  }
	   ],
	   "dataset":[
		  {
			 "seriesname":"2011",
			 "color":"AFD8F8",
			 "data":[
				{
				   "value":"25601.34"
				},
				{
				   "value":"20148.82"
				},
				{
				   "value":"17372.76"
				},
				{
				   "value":"35407.15"
				},
				{
				   "value":"38105.68"
				}
			 ]
		  },
		  {
			 "seriesname":"2012",
			 "color":"F6BD0F",
			 "data":[
				{
				   "value":"57401.85"
				},
				{
				   "value":"41941.19"
				},
				{
				   "value":"45263.37"
				},
				{
				   "value":"117320.16"
				},
				{
				   "value":"114845.27"
				}
			 ]
		  },
		  {
			 "seriesname":"2013",
			 "color":"8BBA00",
			 "data":[
				{
				   "value":"45000.65"
				},
				{
				   "value":"44835.76"
				},
				{
				   "value":"18722.18"
				},
				{
				   "value":"77557.31"
				},
				{
				   "value":"92633.68"
				}
			 ]
		  }
	   ]
	}
});	

Example 2: Creating gauges or widgets for dashboards

$("#chartContainer3").insertFusionCharts({
	type: "AngularGauge",
	width: "300",
	height: "150",
	dataFormat: "json",
	dataSource: {
	  "chart": {
		"lowerlimit": "0",
		"upperlimit": "100",
		"lowerlimitdisplay": "Bad",
		"upperlimitdisplay": "Good",
		"numbersuffix": "%",
		"showvalue": "1",
		"bgColor":"ffffff"
	  },
	  "colorrange": {
		"color": [
		  {
			"minvalue": "0",
			"maxvalue": "75",
			"code": "FF5904"
		  },
		  {
			"minvalue": "75",
			"maxvalue": "90",
			"code": "F6BD0F"
		  },
		  {
			"minvalue": "90",
			"maxvalue": "100",
			"code": "8BBA00"
		  }
		]
	  },
	  "dials": {
		"dial": [
		  {
			"value": "76"
		  }
		]
	  }
	}
});
$("#chartContainer4").insertFusionCharts({
	type: "Cylinder",
	width: "175",
	height: "150",
	dataFormat: "json",
	dataSource: {
	  "chart": {
		"lowerlimit": "0",
		"upperlimit": "2800",
		"cylFillColor":"ff5904",
		"numbersuffix": " ltrs.",
		"showvalue": "0",
		"bgColor":"ffffff"
	  },
	  "value": "1776"
	}
});
$("#chartContainer5").insertFusionCharts({
	type: "Thermometer",
	width: "115",
	height: "150",
	dataFormat: "json",
	dataSource: {
	  "chart": {
		"lowerlimit": "-30",
		"upperlimit": "100",
		"gaugeFillColor":"ff5904",
		"numbersuffix": " °C",
		"showvalue": "0",
		"bgColor":"ffffff"
	  },
	  "value": "63"
	}
});
$("#chartContainer6").insertFusionCharts({
	type: "VLED",
	width: "120",
	height: "150",
	dataFormat: "json",
	dataSource: {
	  "chart": {
		"lowerlimit": "0",
		"upperlimit": "100",
		"lowerlimitdisplay": "Start",
		"upperlimitdisplay": "End",
		"numbersuffix": " mtrs.",
		"showvalue": "0",
		"bgColor":"ffffff"
	  },
	  "colorrange": {
		"color": [
		  {
			"minvalue": "0",
			"maxvalue": "35",
			"code": "FF5904"
		  },
		  {
			"minvalue": "35",
			"maxvalue": "70",
			"code": "F6BD0F"
		  },
		  {
			"minvalue": "70",
			"maxvalue": "100",
			"code": "8BBA00"
		  }
		]
	  },
	  "value": "76"			          
	}
});

Example 3: Creating a pie chart with drill-down functionality

//Sales data by country
var salesData = {
	  "Austria":{
		 "2011":25601,
		 "2012":57401,
		 "2013":45000
	  },
	  "Brazil":{
		 "2011":20148,
		 "2012":41941,
		 "2013":44835
	  },
	  "France":{
		 "2011":17372,
		 "2012":45263,
		 "2013":18722
	  },
	  "Germany":{
		 "2011":35407,
		 "2012":117320,
		 "2013":77557
	  },
	  "USA":{
		 "2011":38105,
		 "2012":114845,
		 "2013":92633
	  }
};
//Create the primary chart on page load
$(function(){
	//Insert the parent chart
	$("#chartParent").insertFusionCharts({
		type: "Pie2D",
		width: "400",
		height: "300",
		dataFormat: "json",
		dataSource: getParentChartData()
	});
	
	//Insert the child chart with no data to start with. 
	$("#chartChild").insertFusionCharts({
		type: "Column2D",
		width: "400",
		height: "300",
		dataFormat: "json",
		//Empty data to start with
		dataSource: {}
	})
 });
 
 //Invoked when columns of the chart is clicked
 function updateByYearChart(strCountry){
	//Update the data for secondary chart
	$("#chartChild").updateFusionCharts({"dataSource":getChildChartData(strCountry)});
 }
 
 //Builds the data for primary column chart
 function getParentChartData(){
	//Create JSON object for primary chart's data
	var chartData = {};
	//Set chart attributes
	chartData.chart = {};
	chartData.chart.caption = "Sales by country";
	chartData.chart.subCaption = "Click on a pie to see details";
	chartData.chart.xAxisName = "Country";
	chartData.chart.yAxisName = "Sales";
	chartData.chart.showPercentValues = "1";
	chartData.chart.showPercentInToolTip = "0";
	chartData.chart.numberPrefix = "$";
	//Disabling slicing of pie slice upon click, by setting distance to 0
	chartData.chart.slicingDistance="0";
	chartData.chart.bgColor = "ffffff";
	chartData.chart.showBorder = "0";
	//Create array within the chartData object to store data
	chartData.data = [];
	//Iterate through each country to add data
	$.each(salesData, function(i, val){
		//Iterate through the values and sum it for this country
		var sum = 0;
		$.each(val, function (j, subval){
			sum = sum + Number(subval);
		});
		//Push item to chartData
		//Note how we're adding the link attribute in the format j-updateByYearChart-countryName.
		//The updateByYearChart method is defined in global scope, and is invoked whenever a column
		//of the parent chart gets clicked. Name of country clicked is passed as parameter to this method.
		chartData.data.push ({"label":i, "value":sum, "link":"j-updateByYearChart-"+i});
	});
	return chartData;
}

//Returns data for the child chart - to show data for the specified country by year
function getChildChartData(strCountry){
	//Create JSON object for primary chart's data
	var chartData = {};
	//Set chart attributes
	chartData.chart = {};
	chartData.chart.caption = strCountry + " - sales by year";
	chartData.chart.xAxisName = "Year";
	chartData.chart.yAxisName = "Sales";
	chartData.chart.numberPrefix = "$";
	chartData.chart.bgColor = "ffffff";
	chartData.chart.showBorder = "0";				
	//Create array within the chartData object to store data
	chartData.data = [];
	//Iterate through each country to add data
	$.each(salesData[strCountry], function(i, val){
		//Push item to chartData
		chartData.data.push ({"label":i, "value":val});
	});
	return chartData;
}