Data in the form of rows and columns is boring, and it’s difficult to derive insights from it in that form. Add interactive charts to it, and you make it easier for everybody to make sense of it. You start seeing patterns that were impossible to spot by looking at raw data alone. But how do you add interactive charts to your website?
Well, that’s what this tutorial will teach you. In this post I will walk you through the process of creating interactive charts in one of the most popular JavaScript frameworks – AngularJS. We will be implementing charts via FusionCharts’ JavaScript charts package. And to make our job easier, we will make use of its AngularJS charts plugin.
AngularJS makes it quite easy to create modern web apps (after the initial learning curve, of course!). And FusionCharts’ AngularJS charts plugin will let us create interactive charts with just a single directive.
With the introduction out of the way, let’s get started with the tutorial! You can also check the demo first.
I have divided this tutorial into 4 steps:
- Set the dependencies
- Inject
ng-fusionchartsmodule - Define controller for the app
- Render the FusionCharts view
Step 1: Set the Dependencies
These are the three JavaScript files that we need to include:
- AngularJS (1.x)
- FusionCharts’ core JS library
- FusionCharts’ AngularJS charts plugin
Here’s how your HTML will look like after this step:
<head> <!-- AngularJS - Either include via CDN or download AngularJS and use local link --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> <!-- FusionCharts Core Library JavaScript File--> <script type="text/javascript" src="path/to/fusioncharts.js"></script> <!-- FusionCharts AngularJS Plugin JavaScript File--> <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script> </head> |
Step 2: Inject ng-fusioncharts Module
Next step is to include ng-fusioncharts as a dependency in our app. Below is the code to achieve that:
var app = angular.module('DemoApp', ['ng-fusioncharts']);
Step 3: Define Controller for the App
In the controller for the app, we augment the controller scope with Fusioncharts’ chart definition:
app.controller('DemoController', function($scope) { //chart definition $scope.dataSource = '{"chart": { "caption":"Sales - 2014 v 2015", "numberPrefix":"$", "captionFontSize":"14", "subcaptionFontSize":"14", "baseFontColor":"#666666", "baseFont":"Helvetica Neue,Arial", "baseFontSize":"11", "subcaptionFontBold":"0", "canvasBgAlpha":"0", "showValues":"0", "paletteColors":"#10a9ea,#ebd00f", "bgColor":"#f6f6f6", "bgAlpha":"100", "showBorder":"0", "showShadow":"0", "showAlternateHGridColor":"0", "showXAxisLine":"1", "xAxisLineThickness":"1", "xAxisLineColor":"#cdcdcd", "xAxisNameFontColor":"#8d8d8d", "yAxisNameFontColor":"#8d8d8d", "canvasBgColor":"#ffffff", "lineThickness":"4", "anchorBgColor":"#ffffff", "legendBgColor":"#ffffff", "legendBgAlpha":"100", "legendBorderAlpha":"50", "legendBorderColor":"#888888", "divlineAlpha":"100", "divlineColor":"#999999", "divlineThickness":"1", "divLineIsDashed":"1", "divLineDashLen":"1", "divLineGapLen":"1", "toolTipColor":"#ffffff", "toolTipBorderColor":"#ffffff", "toolTipBorderThickness":"1", "toolTipBgColor":"#000000", "toolTipBgAlpha":"80", "toolTipBorderRadius":"4", "toolTipPadding":"10", "toolTipFontSize":"20", "anchorRadius":"5", "anchorBorderThickness":"3", "anchorTrackingRadius":"15", "showHoverEffect":"1" }, "categories":[ { "category":[ {"label":"Jan"}, {"label":"Feb"}, {"label":"Mar"}, {"label":"Apr"}, {"label":"May"}, {"label":"Jun"}, {"label":"Jul"}, {"label":"Aug"}, {"label":"Sep"}, {"label":"Oct"}, {"label":"Nov"}, {"label":"Dec"} ] }], "dataset":[ {"seriesname":"Bakersfield Central", "data":[ {"value":"12123"}, {"value":"8233"}, {"value":"25507"}, {"value":"9110"}, {"value":"13529"}, {"value":"8803"}, {"value":"19202"}, {"value":"13500"}, {"value":"16202"}, {"value":"19200"}, {"value":"9202"}, {"value":"11366"}] }, {"seriesname":"Los Angeles Topanga", "data":[ {"value":"13400"}, {"value":"9800"}, {"value":"22800"}, {"value":"12400"}, {"value":"15800"}, {"value":"9800"}, {"value":"21800"}, {"value":"9310"}, {"value":"12362"}, {"value":"17230"}, {"value":"10202"}, {"value":"12366"}] } ]}'; }); |
Step 4: Render the FusionCharts View
Now add the following markup to your HTML to render FusionCharts:
<div ng-controller="DemoController"> <fusioncharts id="mychartcontainer" chartid="mychart" width="650" height="400" type="msspline" dataFormat= 'json', dataSource="{{dataSource}}" config="{{chartoptions}}"> </fusioncharts> <!-- dataSource is data used by FusionCharts to render the chart and is declared above using $scope --> </div> |
If you have followed above steps properly and not messed up anywhere, you should see a working chart like this: http://codepen.io/4two2/pen/MKGKVO
About the Guest author:
Demo chart won’t load
how to get this file ?
</script
cool 😀
Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information’s.
Is there any freelancers you would recommend for doing this type of coding?
I have a client looking to integrate charts onto his site. I am looking to get steered in the right direction.
Where can I find the html that you used to get this working?
Check the demo link at the bottom of the post, which also gives the code.