This tutorial helps you implement different type of charts using Angular-FusionCharts Plugin in Angular JS.
We will be creating following three files in order to demonstrate the implementation of charts using Angular-FusionCharts Plugin -
- charts.html file for creating the Charts.
- charts.js file containing AngularJs controller responsible for initializing the Charts.
This is how our project structure looks like -
Here is how our HTML file charts.html looks like -
<html ng-app="ChartApp">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script
src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script
src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
</head>
<body>
<div ng-controller="DemoController">
<fusioncharts datasource="{{myDataSource}}" type="mscombi2d" width="510" height="400">
</fusioncharts>
</div>
</body>
</html>
Let's discuss some of AngularJs specific parts in the above HTML file. Specifically, here are the attributes that need attention -
- First we have added two libraries fusioncharts.js and angular-fusioncharts.js in script tag - <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>,
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script> - The angular-fusioncharts.js file should mandatorily be included after all other scripts.
- The AngularJS application is defined by ng-app="ChartApp".The application runs inside the <html>.
- Now we create div with controller ng-controller="DemoController" and inside this we create fusioncharts tag to define the view (chart width, height, and chart type) and
the variable for the datasource.
Finally, here is the javascript file containing the controller for our charts -
var app = angular.module('ChartApp', ["ng-fusioncharts"])
app.controller('DemoController', function($scope) {
$scope.myDataSource = {
"chart": {
"caption": "Demo",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In INR)",
"numberprefix": "Rs",
"theme": "fint"
},
"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": "Actual",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "25000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesname": "Projected",
"renderas": "line",
"showvalues": "0",
"data": [
{
"value": "15000"
},
{
"value": "16000"
},
{
"value": "17000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "20000"
},
{
"value": "21000"
},
{
"value": "22000"
},
{
"value": "23000"
}
]
},
{
"seriesname": "Profit",
"renderas": "area",
"showvalues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
}
]
}
});
In the above javascript file, there are a few things to note:
- First we add ng-fusioncharts directive in our module.
- Then we set the datasource using the regular FusionCharts JSON format like chart theme,Y-axis,X-axis,caption,numberPrefix,
Categories with label,dataset with different attributes like - seriesname,reanderas and data values .
This is how the HTML code above will be displayed in a browser with Chart
You can see the working demo of the above multiple charts here.
Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.