Gagan Sikri

Creating Charts in AngularJS

Recommended Posts

I have divided the complete process into the following four easy-to-understand steps:

  1. Include the required JavaScript files
  2. Create the AngularJS app
  3. Define the chart controller
  4. Render the chart

Step 1: Include the required JavaScript files

We need the following three JavaScript dependencies to render our chart:

  1. AngularJS Library
  2. FusionCharts core package JS files
  3. FusionCharts Angular charts plugin

We will include all the above files using the <script> tag, as shown in the code below:

<html>
    <head>
        <!-- including AngularJS library -->
        <script type="text/javascript" src="path/to/angular.min.js"></script>

        <!-- including FusionCharts core package files -->
        <script type="text/javascript" src="path/to/fusioncharts.js"></script>
        <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script>

        <!-- including FusionChart Angular charts plugin -->
        <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script>
    </head>
</html>

Step 2: Create the AngularJS app

Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it:

var app = angular.module('myChartApp', ['ng-fusioncharts']);

Step 3: Define Chart Controller

In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations:

app.controller('chartController', function($scope) {
 	// chart datasource
	 $scope.dataSource = {
		 "chart": {
			// caption configuration
         "caption": "Highest Paid Actors",
         "captionFontBold": "0",
         "captionFontSize": "20",
		 // more chart properties - explained later
		 },
		 "data": [{
			 "label": "Leonardo",
			 "value": "1"
		 	}, //more chart data
 		]
	 };
});

Step 4: Render the Chart

We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it:

<div ng-controller="chartController">
 	<fusioncharts 
		 width= "100%"
		 height= "400"
		 type= "bar2d"
		 dataFormat= "json"
		 dataSource= "{{dataSource}}">
	 </fusioncharts>
</div>

When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example.

If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page.  

Share this post


Link to post
Share on other sites
Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoticons maximum are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...