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.
<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.
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
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
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…
By Ben Moss
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…
By Simon Sterne
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,…