This tutorial helps you implement charts and click events 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 Chart and Events.
- charts.css file for adding basic style to our Chart and Events.
- charts.js file containing AngularJs controller responsible for initializing the Chart
This is how our project structure looks like -
Here is how our HTML file charts.html looks like -
<html ng-app="ChartApp">
<head>
<link rel="stylesheet" href="css/charts.css">
<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 width="510" height="400" type="column2d" datasource="{{dataSource}}" events="events">
</fusioncharts>
<p>
<a id="change_data" ng-click="updateMyChartData()">Change Data</a>
<a id="change_color" ng-click="changeBackgroundColor()">Change Chart Background Color</a>
<a id="change_caption" ng-click="changeCaptionTextAlignment()">Caption Left-Aligned</a>
<br><br>
<span>The value that you have selected is: <b>{{ selectedValue }}</b></span>
</p>
</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. - Now we create click events - for update the chart data,change the background color and change the caption alignment.
- And in the last we create value indicator - to show chart values on click chart.
Next file to talk about is a css file that we have added to give our links and chart a fine look. This is a simple CSS file without any angular or fancy stuff in it.
body {
font: 12px Arial;
}
#change_caption {
text-align: center;
width: 135px;
padding: 6px;
display: inline-table;
color: white;
background-color: gray;
font-size: 12px;
cursor: pointer;
border: 1px solid gray;
border-radius: 13px;
margin-left: 5px;
}
#change_color {
text-align: center;
width: 210px;
padding: 6px;
display: inline-table;
color: white;
background-color: gray;
font-size: 12px;
cursor: pointer;
border: 1px solid gray;
border-radius: 13px;
margin-left: 5px;
}
#change_data {
text-align: center;
width: 100px;
padding: 6px;
display: inline-table;
color: white;
background-color: gray;
font-size: 12px;
cursor: pointer;
border: 1px solid gray;
border-radius: 13px;
}
Finally, here is the javascript file containing the controller for our charts and events -
var app = angular.module('ChartApp', ["ng-fusioncharts"])
app.controller('DemoController', function($scope) {
$scope.dataSource = {
chart: {
caption: "Demo",
subCaption: "last month",
numberPrefix: "Rs",
theme: "ocean"
},
data:[{
label: "Delhi",
value: "800000"
},
{
label: "Gurgaon",
value: "730000"
},
{
label: "Banglore",
value: "590000"
},
{
label: "Mumbai",
value: "520000"
},
{
label: "Hydrabad",
value: "330000"
}],
"trendlines": [{
"line": [{
"startvalue": "640000",
"color": "#FFA500",
"displayvalue": "Target - Rs640K"
}]
}]
};
$scope.updateMyChartData = function () {
$scope.dataSource.data[2].label = "This Label is Updated";
$scope.dataSource.data[2].value = "420000";
$scope.dataSource.data[3].label = "This is updated as well";
$scope.dataSource.data[3].value = "210000";
};
$scope.changeBackgroundColor = function () {
$scope.dataSource.chart.bgColor = "white";
};
$scope.changeCaptionTextAlignment = function () {
$scope.dataSource.chart.captionAlignment = "left";
};
$scope.selectedValue = "Rs0K";
$scope.events = {
dataplotclick: function (ev, props) {
$scope.$apply(function () {
$scope.selectedValue = props.displayValue;
});
}
}
});
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,caption,numberPrefix,data values and trendlines(target line).
- Then we create event functions like- updateMyChartData function to update the data,changeBackgroundColor function to change the
background color of chart and changeCaptionTextAlignment function to change caption alignment. - And the last function events to show chart values.
This is how the HTML code above will be displayed in a browser with Chart and events.
You can see the working demo of the above chart and events 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.