Dynamic jQuery Charts for Your Website

If you have ever worked with large data sets, then you must know how difficult it is to work with raw data alone. Making sense out of long rows of data is not easy. Add some visualization to it and you suddenly start seeing patterns that were never visible before. But how do you visualize data for your website?

Enter JavaScript chart libraries. They make it very easy to add beautiful charts to any web page.

In this tutorial I will cover the process of creating such charts in detail. You will have a working chart with full source-code by the end of this article. We will do it in jQuery – one of the most popular JavaScript libraries. For making charts, we will make use of FusionCharts’ JavaScript charts library. And to make our task easier, we will take help of its jQuery charts plugin. If you are reading this tutorial for integrating charts in your personal project, then you make use of its free personal license.

A quick look into what we will be making:

See the Pen Dynamic Charts for Your Website in jQuery by Gagan Sikri (@sikrigagan) on CodePen.0

We will cover following 3 sections to get to our final goal:

  • Part-1: Loading required JavaScript files for the project
  • Part-2: Defining HTML for chart
  • Part-3: Rendering the chart

Part 1: Loading Required JavaScript Files

For this project, we need these four JavaScript files:

  • jQuery library: download compressed/minified version from linked page or include it via a CDN.
  • FusionCharts’ library: download package contains both minified and un-minified versions. As shown below include fusioncharts.js and fusioncharts.powercharts.js. Even if you don’t include fusioncharts.powercharts.js explicitly, it will pick it up itself if it is present in the same folder.
  • jQuery charts plugin: this has to be downloaded separately from linked page. Does not come with download package.

We will Include all the files listed above in the HTML using <script> tags. Here’s the code for that:

<head>
    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- FusionCharts files -->
    <script type="text/javascript" src="/js/fusioncharts.js"></script>
    <script type="text/javascript" src="/js/fusioncharts.powercharts.js"></script>

    <!-- jQuery charts Plugin -->
    <script type="text/javascript" src="/js/jquery-plugin.js"></script>
</head>


Part 2: Defining HTML for Chart

We need an HTML container element inside which our charts will go. I recommend using a <div> element for this purpose. Here is the HTML code for that:

<div id="spline-chartcontainer">
    Area chart is on its way!
</div>


Part 3: Rendering the Chart

We now need to create a chart instance using insertFusionCharts jQuery method which was added by the jQuery plugin we added in Step-1. insertFusionCharts will be called on the container we defined in Step-2.

Here is the JavaScript code to achieve that:

$("#spline-chartcontainer").insertFusionCharts({
        type: "splinearea",
        width: "100%",
        height: "550",
        dataFormat: "json",
        dataSource: {
      "chart": {
        // caption options
        "caption": "Acme Holiday Club Weekly Visitors",
        "captionPadding": "32",
        "captionFontSize": "22",
        "captionFontColor": "#EEF3F5",
        
        // sub-caption options
        "subCaption": "Week 33 (2015)",
        "subCaptionFontSize": "16",
        
        // font cosmetics
        "baseFont": "Nunito",
        "baseFontColor": "#CFD0D2",
        "outCnvBaseFontColor": "#CFD0D2",
        "baseFontSize": "14",
        "outCnvBaseFontSize": "14",
        "labelDisplay": "Auto",
        
        // x-axis options
        "xAxisName": "Day",
        "xAxisNameFontColor": "#EEF3F5",
        "xAxisNameFontBold": "0",
        "xAxisNameFontSize": "16",
        "showXAxisLine": "0",
        
        // y-axis options
        "yAxisName": "No. of Visitors",
        "yAxisNameFontColor": "#EEF3F5",
        "yAxisNameFontBold": "0",
        "yAxisNameFontSize": "16",
        
        // chart margins and padding options
        "chartLeftMargin": "13",
        "chartRightMargin": "10",
        "chartTopMargin": "10",
        "chartBottomMargin": "13",
        "canvasPadding": "25",
        
        // tooltip options
        "toolTipPadding": "10",
        "toolTipBorderThickness": "1",
        "ToolTipBorderRadius": "2",
        "toolTipBorderAlpha": "60",
        "toolTipBgColor": "#000000",
        "toolTipBorderColor": "#FFFFFF",
        "toolTipBgAlpha": "60",
        "toolTipSepChar": ": ",
        "toolTipColor": "#FFFFFF",
        
        // anchor cosmetics
        "drawAnchors": "1",
        "anchorRadius": "6",
        "anchorHoverEffect": "1",
        "anchorBgColor": "#00FF00",
        //"anchorBorderColor": "#6AE6B3",
        "anchorBorderThickness": "3",
        "anchorTrackingRadius": "40",
        "anchorHoverRadius": "8",
        
        // other chart options
        "showBorder": "0",
        "formatNumberScale": "0",
        "showValues": "0",
        "bgColor": "#3E414A",
        "bgAlpha": "100",
        "canvasBgColor": "3E414A",
        "canvasBgAlpha": "0",
        "showCanvasBorder": "0",
        "showAlternateHGridColor": "0",
        "paletteColors": "#46C28C",
        "usePlotGradientColor": "0"
      },

      "data": [{
        "label": "Monday",
        "value": "1200"
      }, {
        "label": "Tuesday",
        "value": "1050"
      }, {
        "label": "Wednesday",
        "value": "900"
      }, {
        "label": "Thursday",
        "value": "1200"
      }, {
        "label": "Friday",
        "value": "950"
      }, {
        "label": "Saturday",
        "value": "1350"
      }, {
        "label": "Sunday",
        "value": "1450"
      }]
    }
});


type
attribute defines the chart type we are going to plot – splinearea in this example. Dimension of the chart is defined using height and width attributes. chart object under dataSource contains chart configuration options like caption, background color, data plot color and display formats for numbers etc. data array contains the data being plotted in the chart. To learn about customizing a chart’s look and feel, you can visit this documentation page.

That’s it. That is all you need to make a dynamic chart in jQuery. If you followed everything up to this point correctly, you should have a working chart with you. But if there was any problem with your code, you can download the full source-code for the chart here.

More Resources on jQuery Charts

My objective with this tutorial was to get you started with making charts in jQuery for your website. But this is just the tip of the iceberg, and there is a lot more you can do with it. If you are interested in exploring further, check out following resources:

  • Render charts directly from an HTML table. If you have some data present in HTML table, you can use convertToFusionCharts method to make a chart out of that.
  • Get better control over the chart using events. There are a lot of possibilities to add event handlers for adding advanced interactions on your chart.

Leave a Reply

Your email address will not be published. Required fields are marked *