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.
by
Join the DZone community and get the full member experience.
Join For FreeIf 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:
FusionCharts JavaScript charts library
FusionCharts AngularJS charts plugin
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
Opinions expressed by DZone contributors are their own.
Comments