Creating stunning charts with AngularJS

Default avatar.
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:
  1. Include required JavaScript files
  2. Create the AngularJS app
  3. Define the controller
  4. 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:

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


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">
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!

Vikas Lalwani

Vikas is a budding programmer who likes to have fun with front-end technologies. You can see some of his experiments on his website.

Read Next

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…