Creating Interactive Charts in AngularJS

Data in the form of rows and columns is boring, and it’s difficult to derive insights from it in that form. Add interactive charts to it, and you make it easier for everybody to make sense of it. You start seeing patterns that were impossible to spot by looking at raw data alone. But how do you add interactive charts to your website?

Well, that’s what this tutorial will teach you. In this post I will walk you through the process of creating interactive charts in one of the most popular JavaScript frameworks – AngularJS. We will be implementing charts via FusionCharts’ JavaScript charts package. And to make our job easier, we will make use of its AngularJS charts plugin.

AngularJS makes it quite easy to create modern web apps (after the initial learning curve, of course!). And FusionCharts’ AngularJS charts plugin will let us create interactive charts with just a single directive.

With the introduction out of the way, let’s get started with the tutorial! You can also check the demo first.

View Demo

I have divided this tutorial into 4 steps:

1. Set the dependencies
2. Inject ng-fusioncharts module
3. Define controller for the app
4. Render the FusionCharts view

Step 1: Set the Dependencies

These are the three JavaScript files that we need to include:

• AngularJS (1.x)
• FusionCharts’ core JS library
• FusionCharts’ AngularJS charts plugin

Here’s how your HTML will look like after this step:

Step 2: Inject ng-fusioncharts Module

Next step is to include ng-fusioncharts as a dependency in our app. Below is the code to achieve that:

var app = angular.module('DemoApp', ['ng-fusioncharts']);

Step 3: Define Controller for the App

In the controller for the app, we augment the controller scope with Fusioncharts’ chart definition:

app.controller('DemoController', function($scope) {
    //chart definition
    $scope.dataSource =  '{"chart":
        {
            "caption":"Sales - 2014 v 2015",
            "numberPrefix":"$",
            "captionFontSize":"14",
            "subcaptionFontSize":"14",
            "baseFontColor":"#666666",
            "baseFont":"Helvetica Neue,Arial",
            "baseFontSize":"11",
            "subcaptionFontBold":"0",
            "canvasBgAlpha":"0",
            "showValues":"0",
            "paletteColors":"#10a9ea,#ebd00f",
            "bgColor":"#f6f6f6",
            "bgAlpha":"100",
            "showBorder":"0",
            "showShadow":"0",
            "showAlternateHGridColor":"0",
            "showXAxisLine":"1",
            "xAxisLineThickness":"1",
            "xAxisLineColor":"#cdcdcd",
            "xAxisNameFontColor":"#8d8d8d",
            "yAxisNameFontColor":"#8d8d8d",
            "canvasBgColor":"#ffffff",
            "lineThickness":"4",
            "anchorBgColor":"#ffffff",
            "legendBgColor":"#ffffff",
            "legendBgAlpha":"100",
            "legendBorderAlpha":"50",
            "legendBorderColor":"#888888",
            "divlineAlpha":"100",
            "divlineColor":"#999999",
            "divlineThickness":"1",
            "divLineIsDashed":"1",
            "divLineDashLen":"1",
            "divLineGapLen":"1",
            "toolTipColor":"#ffffff",
            "toolTipBorderColor":"#ffffff",
            "toolTipBorderThickness":"1",
            "toolTipBgColor":"#000000",
            "toolTipBgAlpha":"80",
            "toolTipBorderRadius":"4",
            "toolTipPadding":"10",
            "toolTipFontSize":"20",
            "anchorRadius":"5",
            "anchorBorderThickness":"3",
            "anchorTrackingRadius":"15",
            "showHoverEffect":"1"
        },
        "categories":[
        {
            "category":[
                {"label":"Jan"},
                {"label":"Feb"},
                {"label":"Mar"},
                {"label":"Apr"},
                {"label":"May"},
                {"label":"Jun"},
                {"label":"Jul"},
                {"label":"Aug"},
                {"label":"Sep"},
                {"label":"Oct"},
                {"label":"Nov"},
                {"label":"Dec"}
            ]
        }],
        "dataset":[
            {"seriesname":"Bakersfield Central",
            "data":[
            {"value":"12123"},
            {"value":"8233"},
            {"value":"25507"},
            {"value":"9110"},
            {"value":"13529"},
            {"value":"8803"},
            {"value":"19202"},
            {"value":"13500"},
            {"value":"16202"},
            {"value":"19200"},
            {"value":"9202"},
            {"value":"11366"}]
        },
            {"seriesname":"Los Angeles Topanga",
            "data":[
            {"value":"13400"},
            {"value":"9800"},
            {"value":"22800"},
            {"value":"12400"},
            {"value":"15800"},
            {"value":"9800"},
            {"value":"21800"},
            {"value":"9310"},
            {"value":"12362"},
            {"value":"17230"},
            {"value":"10202"},
            {"value":"12366"}]
        }
    ]}';
});

Step 4: Render the FusionCharts View

Now add the following markup to your HTML to render FusionCharts:

If you have followed above steps properly and not messed up anywhere, you should see a working chart like this: http://codepen.io/4two2/pen/MKGKVO

About the Guest author:

Rohit Boggarapu is currently a software engineer at Adobe. He loves developing cool things and writing for the web. When not writing code, you will find him either practicing Yoga, or talking about it. He is always up for a quick chat on Twitter.