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:

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

<head>
    <!-- AngularJS - Either include via CDN or download AngularJS and use local link -->
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
 
    <!-- FusionCharts Core Library JavaScript File-->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
 
    <!-- FusionCharts AngularJS Plugin JavaScript File-->
    <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script>
</head>

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:

<div ng-controller="DemoController">
    <fusioncharts id="mychartcontainer" chartid="mychart" width="650" height="400" type="msspline" dataFormat= 'json', dataSource="{{dataSource}}" config="{{chartoptions}}">
    </fusioncharts>
    <!-- dataSource is data used by FusionCharts to render the chart and is declared above using $scope -->
</div>

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
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.


8 thoughts on “Creating Interactive Charts in AngularJS

  1. Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information’s.

Comments are closed.