Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Interactive Charts Using jQuery

DZone's Guide to

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.

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

So, 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:

  1. Including required JavaScript files

  2. Creating and selecting a chart container

  3. Defining FusionCharts Instance

Step 1: Including Required JavaScript Files

To render an interactive chart, we will need the following JavaScript components:

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.

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:
javascript ,jquery ,charts ,visualization ,web dev ,web developement

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}