Over a million developers have joined DZone.

Making Your First Chart in AngularJS

Since data viz is a substantial part of many modern day apps, you will have to make a chart sooner or later. In this tutorial, I will describe the step by step process of creating your first chart in AngularJS.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

If you are in the business of developing modern day web applications, then there are two things you can't escape—JavaScript frameworks and data visualization. Both are on the rise these days. And, if you are using a JS framework, then there's a good chance of it being AngularJS.

Don't believe me? Just look at the Google Trends graph here.

Data visualization has also been experiencing an upward trend in interest (although, a little less drastic than AngularJS). Since data viz is a substantial part of many modern day apps, you will have to make a chart sooner or later. That's the reason I chose this topic for today's article.

In this tutorial, I will describe the step by step process of creating your first chart in AngularJS. For the purpose of this tutorial, I am going to use FusionCharts' JavaScript charts library and its AngularJS charts plugin. But, you can follow most of the tutorial even if you are using another library.

This is what we will be making today:

I have divided this project into the following five steps (each step covered in detail below):

  • Include JavaScript dependency files

  • Inject AngularJS module for FusionCharts

  • Define controller

  • Customize chart cosmetics

  • Render the chart

Now, let's get started!

Step 1: Include Javascript Dependencies Files

If you have ever built a web-app before, then you must be aware that the first step in development is including all of the dependencies. So, we are going to do the same for this project as well:

All of the above files will go inside the HTML 'head' section. Here's the code for that:

<html ng-app="FirstChartApp">
    <head>

        <!-- AngularJS Core Library: Both CDN and local URL are valid ways to include -->
        <script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular.min.js"></script>

        <!-- FusionCharts JavaScript Package File -->
        <script type="text/javascript" src="path/to/fusioncharts.js"></script>

        <!-- FusionCharts AngularJS Chart Plugin -->
        <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script>

    </head>
</html>

Step 2: Inject 'ng-fusioncharts' Directive

Now, with the dependencies out of our way, we need to inject a chart directive in our application. Since we are using FusionCharts to make our chart, we need to include its AngularJS charts directive ('ng-fusioncharts').

To inject the directive, include the below code in your JavaScript file:

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

Step 3: Define Controller

In the controller for the app, we augment the controller scope with Fusioncharts’ chart definition.
Here's the JS code for that:

app.controller('chartController', function($scope) {
    //chart definition
    $scope.dataSource =  '{ 
        "chart": { 
            "caption": "Box Office Earnings - 2015", 
            "xAxisName": "Month",
            //more chart properties
        },

        "data": [
            { "label": "Jan", "value": "420000" }, 
            { "label": "Feb", "value": "810000" },
            //more chart data
        ]
    }';
});

'$scope.dataSource' contains chart configuration parameters and the data being used to plot the chart. I have only included a few parameters in the above code snippet to make it easier to digest. But, there is a lot you can do as explained in the next step.

Step 4: Customize Chart Cosmetics

When you are designing an app, it's not enough to just include a chart in its default design. Most of the time, you would want to customize it based on your app's theme/design. FusionCharts gives you the ability to customize a chart's look and feel through it's 'chart' object.

Here's a brief explanation about some of the attributes we have used inside the 'chart' object of our project:

  • 'caption': Defines title of the chart.

  • 'xAxisName', 'yAxisName': Defines respective names of the axes.

  • 'paletteColors': Controls color of the column (data plot).

  • 'numberPrefix': Let's you add prefix to data plot values visible on the chart.

There is a lot more you can do, which is better explained in this official documentation page

Step 5: Render Chart in FusionCharts View

Now, add the following markup to your HTML to render the final chart:

<div ng-controller="chartController">
    <fusioncharts id="chart-container" chartid="chart1" width="100%" height="600" type="column2d" dataFormat= 'json', dataSource="{{dataSource}}" config="{{chartoptions}}">
    </fusioncharts>
    <!-- dataSource is data used by FusionCharts to render the chart and is declared above using $scope -->
</div>

'<fusioncharts>' element used in the above code snippet includes chart container ('div' element), chart dimensions, chart type , data format (JSON or XML) and chart configuration.

With the above code, you should be seeing a live chart. If your chart didn’t render, or you want to see the source code, check out this CodePen demo.

Image Credits: Wikimedia

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,charts ,web dev ,web development ,angular js ,visualizations

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}