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
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…