Creating stunning charts with AngularJS

March 31, 2016

Creating stunning charts with AngularJS.

As citizens of the digital world, we are constantly flooded with data. From website analytics to our fitness tracker, data is all around us. As a result, for the front-end designers it is becoming increasingly difficult to present data in a way that stands out from other data sources that are competing for a viewer’s attention. One of the best ways to get your message across is to use great charts and graphs. They allow you to quickly draw attention to the key insights, and they make it possible to discover patterns that are more difficult to observe by looking at raw data alone. In this tutorial I will cover the step-by-step process of creating stunning charts. Instead of using plain HTML/CSS/JS, I decided to use AngularJS, which is one of the most popular JavaScript frameworks at the moment. AngularJS makes creating web applications easier once you get through the initial learning curve. Slowly, but steadily, it is getting wide acceptance all over the world. So if you are not using Angular already, there is a good chance that you will do so in near future. Now, without further ado, let’s get started with the tutorial!

Four steps to making a chart in AngularJS

In addition to AngularJS, we need a charting component. For this project, I am going to use FusionCharts. It has a good collection of charts and provides a dedicated plugin for AngularJS. A quick glimpse into what we will be making:

See the Pen AngularJS Charts: Creating Stunning Charts for Your AngularJS App by Vikas (@vikaslalwani) on CodePen.

To make it little easier to understand, I have divided this tutorial into the following four steps:

Include required JavaScript files
Create the AngularJS app
Define the controller
Render the chart

Step 0: Prepare your data

Before we get to making chart, we need to gather the data and structure it according to format accepted by the charting library. FusionCharts accepts both JSON and XML. We are going to use JSON as it is the most commonly used format for data exchange in modern web apps. FusionCharts accepts JSON data as an array of objects containing label and value:

[{
 "label": "United Kingdom",
 "value": "80"
},{
 "label": "Canada",
 "value": "70"
}]

Since every chart has a different use case, we need to structure the JSON according to the particular chart we want to plot. Here’s a little trick I use: I find JSFiddle for the chart I want to make from FusionCharts’ chart fiddle gallery and copy the format. Then I replace it with my values and adjust it if I have more or fewer data points. After the data is ready, we are all set…

Step 1: Include required JavaScript files

This is generally the first step for any web app you make, and this case is no different. We need to include three JavaScript files on which our app depends:

Core AngularJS library: any minified 1.x version will work.
FusionCharts’ JavaScript charts library: you will find all files in the downloaded folder.
FC’s AngularJS charts plugin: this plugin needs to be downloaded separately.

We will include above files using <script> tag, and this is how the HTML will look after Step 1:

<head>

<!-- AngularJS library -->
<script type="text/javascript" src="angular.min.js"></script>

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

<!-- Angular plugin -->
<script type="text/javascript" src="angular-fusioncharts.min.js"></script>

</head>

Step 2: create the AngularJS app

After including the above dependencies, we will create the AngularJS app and inject the ng-fusioncharts module, which is the plugin we are using. Here is how we do it:

var chartApp = angular.module('chartApp',["ng-fusioncharts"]);

Step 3: Define the controller

The next step is to define the Angular controller for our app. For this, we augment the controller scope with Fusioncharts’ chart definition. Here is how we achieve that:

chartAapp.controller('chartController', function($scope) {
//chart definition
$scope.dataSource = {
"chart": {
"caption": "Sales - 2014 v 2015",
//more chart properties - explained later
},
"dataset": [{
"seriesname": "Bakersfield Central",
"lineAlpha": "55",
//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 avoid cluttering. But, there is a lot you can do as I will explain later.

Step 4: Render the chart

There’s one final step remaining now. To complete that, just add the following markup to your HTML file at the location you want to render your chart:

<div ng-controller="chartController">
<fusioncharts
width="100%"
height="400"
type="msspline"
dataFormat='json'
dataSource="{{dataSource}}">
</fusioncharts>
</div>

Here’s a little explanation for the attributes used inside the fusioncharts directive in above code snippet:

width defines width of the chart container. Keep it 100% if you want your chart to occupy full container width and be responsive.
height defines height of the chart in pixels.
type defines the type of chart being plotted. We are making multi-series spline chart and it has the alias msspline. To find the aliases for other chart types, head over to the chart attributes page and type the name of chart you want to plot.
dataFormat defines the format in which we will feed data (XML or JSON).
dataSource contains chart configuration options and data array.

Going from basic to stunning

If you followed above steps properly, then you would end with a chart that works, but is nowhere near “stunning”. So how do we make it look like the chart you saw at the beginning? Enter chart attributes. Chart attributes allow you to control your chart’s aesthetics. There are literally hundreds of attributes you can use give your chart the feel you want. Just go to the above page and type the chart name you want to customize. For our chart, this is the page that contains all the attributes. It’s not possible to describe all the attributes I have used in my chart, but I have covered the most important ones below:

baseFont: This attribute controls the font family being used on your chart. You can use any font you like. In my example, I have used “Roboto Slab”. Just include the relevant font file in your HTML and you are good to go.
bgColor and canvasBgColor: These attributes let you customize background color for the chart container and its canvas. You can set any hex color code as the value of these attributes.
anchorRadius: If you notice, there are small circles corresponding to all data points. Those little circles are called anchors. anchorRadius lets you control how big those circles will be.
toolTipBgAlpha: This attribute controls the transparency of the tool-tip. You can pass any number from 0 to 100. 0 means completely transparent and 100 means opaque.

The meaning of each attribute becomes easier to guess once you get the hang of it. If you can imagine what you need, there’s a good chance that you will find an attribute for it. And that’s it! We have a working chart built with AngularJS. Feel free to post a comment below or ping me on Twitter if you have any questions about my tutorial. Happy to help!