jQuery Chart Plugin

Lightweight jQuery plugin to render charts and graphs seamlessly across all browsers and devices.


The FusionCharts Cross‐browser jQuery Charts API

The FusionCharts jQuery plugin helps you add interactive JavaScript charts to your web and mobile applications. It combines the delight and comprehensiveness of FusionCharts Suite XT with the easy-to-use jQuery syntax.

jQuery charts and graphs that work across devices

Render jQuery animated charts that work across PCs (including IE6/7/8), Macs, iPads, iPhones and Android devices seamlessly. No cross-browser and cross-device quirks

Update data, chart type or individual properties

Update data, chart type, or individual properties of an existing chart at run-time

Insert a new chart or append to existing container

Insert a new chart or append a chart to the beginning or end of an existing container

Fully customizable charts

Customize the look and feel of every element on the chart

Data from JSON, XML or HTML tables

Plot charts from data contained in JSON, XML or HTML tables

Zoom Line Chart

Plot tens of thousands of data points on the Zoom Line chart

High interactivity with zooming, drill-down and more

Have interactive features like zooming, scrolling, tool-tips, drill-downs, ability to show or hide data series through the legend key. All out-of-the-box

90+ charts and graphs, 1,023 maps

Plot over 90 chart types in 2D/3D and 1,023 maps for your web and mobile applications

You can tap into events

Tap into various events generated by charts to create advanced applications

Creating a simple chart using jQuery

Creating a chart involves 4 simple steps:

  • 1
    Download jQuery and FusionCharts Suite XT. Copy the downloaded JavaScript files to the relevant folder in your web application
  • 2
    Include jQuery.min.js, FusionCharts.js and FusionCharts.jQueryPlugin.js in your web page
  • 3
    Create a <div> or a container to hold the chart
  • 4
    Use insertFusionCharts(), appendFusionCharts() or prependFusionCharts() method to create the chart instance, and provide attributes like width, height, data format and data object

Shown below is a simple Column 2D chart created using jQuery. Use the links below the chart to change the chart type and the View Code tab to see the jQuery code required to render the chart.

$("#chartContainer1").insertFusionCharts({
type: "Column3D",
width: "600",
height: "300",
dataFormat: "json",
dataSource: {
   "chart":{
	  "caption":"Monthly Sales Summary",
	  "subcaption":"For the first half of 2013",
	  "xAxisName":"Month",
	  "yAxisName":"Sales",
	  "numberPrefix":"$",
	  "bgcolor":"ffffff"
   },
   "data":[
	  { "label":"January", "value":"14400" },
	  { "label":"February", "value":"19600" },
	  { "label":"March", "value":"24000" },
	  { "label":"April", "value":"15700" },
	  { "label":"May", "value":"23700" },
	  { "label":"June", "value":"22800" }
   ],
   "trendlines":[ {
		 "line":[{
			   "startValue":"17100",
			   "displayValue":"Last year's {br} average",
			   "valueOnRight":"1",
			   "color":"999999"
			}]
	  }]
	  }
});
		

To change the chart type from Column 2D to Pie 3D, the following code is used. You can change multiple properties of the chart at the same time, by clubbing all the attributes together in updateFusionCharts() method.

$("#btnPie3d").click(function(){
	$("#chartContainer1").updateFusionCharts({"swfUrl":"Pie3D"});
});

Creating a jQuery chart with multiple data series

You can add any number of series to a chart, and even stack them up. The name of each data series automatically shows up in the legend, which when clicked show or hide the respective 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",
		  "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"
				}
			 ]
		  }
	   ]
	}
});	

Creating gauges or widgets for dashboards using jQuery

FusionWidgets XT, from FusionCharts Suite XT, supports a variety of gauges that can be used to plot KPIs for dashboards and monitors. These gauges are real-time and can be configured to automatically poll servers every n seconds to request new data and update itself. To create a gauge, you use the same insertFusionCharts(), but provide a slightly different JSON data structure.

$("#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"			          
	}
});

Apart from the chart types shown above, using FusionCharts jQuery chart plugin, you can create over 90 chart types, including:

  • Simple chart types like Column, Pie, Line, Area etc.
  • Multi-series and Stacked Charts
  • Combination charts allowing you to combine any sequence of column, line, area, stacked area
  • Charts that can zoom and scroll
  • Bubble and XY Plot Charts
  • Real-time gauges for dashboards like speedometer, cylinder, thermometer, bulb etc.
  • Specialized charts in JavaScript like Funnel, Pyramid, Pareto, Marimekko, Candlestick, Box Plots, Heatmaps, Waterfall and Bullet Graph
  • Editable charts that let you drag-and-drop columns or lines to change the values

Creating jQuery pie chart with drill-down functionalities

All the charts in FusionCharts Suite XT support drill-down, allowing end users to click on a data point that leads to an action like opening a new chart or executing a JavaScript method. This allows you to create dashboards that can elegantly show multiple levels of data. To enable drill-down to a data point, all you need to do is add the link attribute to any data point, and specify the action thereafter. In this example, we have used the j-notation of FusionCharts Suite to execute a custom JavaScript method, when a pie slice is clicked.

//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;
}

Using HTML tables as a data source

FusionCharts jQuery plugin can also accept an HTML table as a data source, thereby eliminating the need to convert that data to JSON or XML format. Shown below is an example.

$("#btnConvert").click(function(){
	$("#dataTable").convertToFusionCharts({type: "mscolumn2d",
	width: "800",
	height: "300",
	dataFormat: "htmltable",
	renderAt:"chartContainer",
	renderer:"javascript"					
}, {
	"chartAttributes":{
			caption:"Units sold for last 2 years",
			xAxisName:"Month",
			yAxisName:"Units",
			bgColor:"FFFFFF"							
		},
	//Do not hide the table once chart is rendered
	"hideTable":false					
	});
});