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
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…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton