Creating Interactive Charts Using jQuery
In this tutorial, I will walk you through the process of creating interactive charts in one of the most popular JavaScript libraries—jQuery. We will be implementing charts via FusionCharts JavaScript graphs package. And, to make our task easier, we will make use of their fantastic jQuery graphs plugin.
by
Join the DZone community and get the full member experience.
Join For FreeSo, you have a huge data set and now you want to analyze it. How do you do it? Well, if you are like most people then you will find it difficult to derive meaningful insights just by working with raw data.
Thus, we have data visualization. Plot a chart using your data and suddenly patterns start emerging. Now you have something that you can work with. But, how do you create dataviz or interactive charts?
To learn about that, you will have to follow this step-by-step tutorial!
In this tutorial, I will walk you through the process of creating interactive charts in one of the most popular JavaScript libraries—jQuery. We will be implementing charts via FusionCharts JavaScript graphs package. And, to make our task easier, we will make use of their fantastic jQuery graphs plugin.
This is what we will be creating (click here if the demo below doesn't load):
I have divided this tutorial into following 3 steps:
Including required JavaScript files
Creating and selecting a chart container
Defining FusionCharts Instance
Step 1: Including Required JavaScript Files
To render an interactive chart, we will need the following JavaScript components:
Core jQuery library
FusionCharts JavaScript library
FusionCharts' jQuery charts plugin
All the above files will go inside `head` section using `script` tags. Here's the code to achieve that:
<head>
<!-- FusionCharts Core Library JavaScript File-->
<script type="text/javascript" src="path/to/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts.charts.js"></script>
<!-- jQuery - Either include CDN Link or download jQuery and use local link -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- FusionCharts' jQuery Plugin -->
<script type="text/javascript" src="path/to/fusioncharts-jquery-plugin.js"></script>
</head>Step 2: Creating & Selecting a Container for Chart
We will use an HTML `div` element as our chart container:
<div id="chart-container">Awesome chart on its way!</div>Then, we select our container using standard jQuery `$` selector:
(function() {
$('#chart-container')
});Step 3: Defining FusionCharts Instance
We now need to define FusionCharts instance using the `insertFusionCharts` method provided by the FC's jQuery plugin.
Here is the JS code to achieve that:
(function() {
$("#chart-container").insertFusionCharts({
type: "doughnut2d",
width: "100%",
height: "350",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Ecommerce Revenue Distribution",
"subCaption": "By Product Category",
"numberPrefix":"$",
"paletteColors":"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor":"#F6F6F6",
"baseFontColor":"#666666",
"bgAlpha":"100",
"showBorder":"0",
"use3DLighting":"0",
"showShadow":"0",
"enableSmartLabels":"0",
"startingAngle":"310",
"showLabels":"0",
"showPercentValues":"1",
"showLegend":"1",
"legendBgColor":"#ffffff",
"legendBgAlpha":"100",
"legendBorderAlpha":"50",
"legendBorderColor":"#888888",
"legendShadow":"0",
"defaultCenterLabel":"Total revenue: $64.08K",
"centerLabel":"Revenue from $label: $value",
"centerLabelBold":"1",
"showTooltip":"1",
"decimals":"0",
"captionFontSize":"14",
"subcaptionFontSize":"14",
"subcaptionFontBold":"0",
"toolTipColor":"#ffffff",
"toolTipBorderColor":"#ffffff",
"toolTipBorderThickness":"1",
"toolTipBgColor":"#000000",
"toolTipBgAlpha":"80",
"toolTipBorderRadius":"4",
"toolTipPadding":"10",
"toolTipFontSize":"20"
},
"data": [
{"label":"Food","value":"28504"},
{"label":"Apparels","value":"14633"},
{"label":"Electronics","value":"10507"},
{"label":"Household","value":"4910"}
]
}
});
//end of FusionCharts instance
}());If you have followed all the above steps properly, you should have a working chart sample with you now. If there's any problem, check out the full code for above sample here.
Next Steps
This was a basic tutorial to get you started with making interactive charts. If you want to explore further, check out the following resources:
- You can play with a chart's look and feel using various attributes inside the`chart` object under `dataSource`. To learn more, you can visit this detailed documentation page.
- Render charts directly from a table.
- Enhance a chart's functionality for better analysis by using events.
Opinions expressed by DZone contributors are their own.
Comments