FusionCharts AngularJS Plugin

Introduction - In this article, we will learn how to use the FusionCharts Plugin with the AngularJS Framework. I hope you will like this.

What’s FusionCharts Plugin?

FusionCharts Suite XT includes an extensive range of charts, gauges, and maps that you can use to plot all types of static and real-time data.

The Angular-FusionCharts plugin, along with FusionCharts Suite XT, lets you add interactive JavaScript charts and graphs to your web and mobile applications using only a single AngularJS directive.

You can download the zip file from FusionCharts.

Features

Add a chart using just a single directive.
Auto-updates your chart object on modifying scope.
Angular-friendly events let you call controller functions directly from the chart.
Offers advanced control by giving you access to full FusionCharts object.
Has a variety of ways to add a chart, from JSON URL to Scope Array Binding.
Plenty of examples and good documentation.

Create your Application

Open Visual Studio and select File, click New Project.

The "New Project" window will pop up. Select ASP.NET Web Application (.NET Framework), name your project, and click OK.

Next, new dialog will pop up for selecting the template. We are going choose Empty and click OK.

Angular Part

First of all, we need to create a new folder which includes two js files respectively: AppChart.js and ChartController.js.

In order to create new js files, right click on AngularApp folder > Add > JavaScript File.

AppChart.js

var app = angular.module('myApp', ['ngRoute', 'ng-fusioncharts']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/ChartDemo', {
templateUrl: '/DemoChart.html',
controller: 'ChartController'
}).otherwise({
controller: 'ChartController'
})
}]);

Here, we have defined AngularJS module (in our case myApp), and injected ngRoute module which allow us to use routing then ng-fusioncharts module that give us access to use different features of fusionchart like directives, events…

ChartController.js

app.controller('ChartController', function ($scope) {
$scope.DataSource1 = {
chart: {
caption: "Harry's SuperMart",
subCaption: "Top 5 stores in last month by revenue",
numberPrefix: "$",
theme: "fint"
},
data: [{
label: "Bakersfield Central",
value: "880000"
},
{
label: "Garden Groove harbour",
value: "730000"
},
{
label: "Los Angeles Topanga",
value: "590000"
},
{
label: "Compton-Rancho Dom",
value: "520000"
},
{
label: "Daly City Serramonte",
value: "330000"
}]
}
$scope.DataSource2 = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data: [
{
label: "Teenage",
value: "1250400"
},
{
label: "Adult",
value: "1463300"
},
{
label: "Mid-age",
value: "1050700"
},
{
label: "Senior",
value: "491000"
}
]
}
});

Create HTML Page - For doing this, right click on project name > Add > HTML Page

DemoChart.html

<!DOCTYPE html>
<html>
<head>
<title>.: Fuusion Chart Using AngularJS :. </title>
<meta charset="utf-8" />
</head>
<body>
<div style="margin-left:50px;">
<div fusioncharts
width="600"
height="400"
type="column2d" style="float:left"
dataSource="{{DataSource1}}">
</div>
<div fusioncharts
width="600"
height="400"
type="pie3d"
dataSource="{{DataSource2}}">
</div>
</div>
</body>
</html>

Before running, we need to add some libraries inside index.html as shown below.

Index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/mainstyle.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="row" ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>
<script src="AngularApp/AppChart.js"></script>
<script src="AngularApp/ChartController.js"></script>
<script src="scripts/fusioncharts.charts.js"></script>
<script src="scripts/fusioncharts.js"></script>
<script src="scripts/angular-fusioncharts.min.js"></script>
</body>
</html>

Output

That’s all. Please send your feedback and queries in comments box.