In this article, we will look into the integration of Cash Flow via VLead Funnel Fusion Chart with AngularJS and WebAPI.
Introduction
Data Visualization is a very important aspect from the view point of an end user since it presents the visual representation of data. It brings clarity in communicating the information to the end users via the graphs, plots, tables, charts etc. It is through the application of proper and effective visualization that help users to analyze and reason about data and evidence which on the other hand brings more data accessibility, understand ability and thereby usability leading to make proper strategic decision.
FusionCharts, part of InfoSoft Global (P) Ltd, is privately held software provider of data visualization products (JavaScript Charts, Maps, Widgets and Dashboards).
In this article, we will look into the integration of Cash Flow via VLead Funnel Fusion Chart with AngularJS and WebAPI.
Objective
Consider a scenario where say the Agents have collected the money from the customers, then from various Agents, the Agencies have collected the money. Similarly from various Agencies the Cash Management System(CMS) have collected the amounts and finally how much amount the System has received.
The final output should be as under
Using the code
Let us first create the data structure
public class Chart
{
public string caption { get; set; }
public string subcaptionFontBold { get; set; }
public string lowerLimit { get; set; }
public string upperLimit { get; set; }
public string lowerLimitDisplay { get; set; }
public string upperLimitDisplay { get; set; }
public string numberSuffix { get; set; }
public string showValue { get; set; }
public string showBorder { get; set; }
public string showShadow { get; set; }
public string tickMarkDistance { get; set; }
public string alignCaptionWithCanvas { get; set; }
public string captionAlignment { get; set; }
public string bgcolor { get; set; }
}
public class Color
{
public string minValue { get; set; }
public string maxValue { get; set; }
public string code { get; set; }
}
public class ColorRange
{
public List<Color> color { get; set; }
}
public class MoneyMovement
{
public Chart chart { get; set; }
public ColorRange colorRange { get; set; }
public string value { get; set; }
}
public class PartiesMoneyMovement
{
public MoneyMovement Agents { get; set; }
public MoneyMovement Agencies { get; set; }
public MoneyMovement CMS { get; set; }
}
and then write the WebAPI as under
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace WebAPI2.Controllers
{
public class CashFlowAndCollectionChartReportController : ApiController
{
[Route("FusionChartReports/CashFlowAndCollectionReport")]
public PartiesMoneyMovement GetCashFlowAndCollectionReport()
{
var objPartiesMoneyMovement = new PartiesMoneyMovement();
objPartiesMoneyMovement.Agents = MoneyMovementForAgent();
objPartiesMoneyMovement.Agencies = MoneyMovementForAgency();
objPartiesMoneyMovement.CMS = MoneyMovementForCMS();
return objPartiesMoneyMovement;
}
private MoneyMovement MoneyMovementForAgent()
{
MoneyMovement mmForAgent = new MoneyMovement();
CommonMoneyMovementsComponents(mmForAgent, "Agent", "#7ff6ff", "#5a89ad");
mmForAgent.value = "48";
return mmForAgent;
}
private MoneyMovement MoneyMovementForAgency()
{
MoneyMovement mmForAgency = new MoneyMovement();
CommonMoneyMovementsComponents(mmForAgency, "Agency", "#e7c7eb", "#bf384f");
mmForAgency.value = "55";
return mmForAgency;
}
private MoneyMovement MoneyMovementForCMS()
{
MoneyMovement mmForCMS = new MoneyMovement();
CommonMoneyMovementsComponents(mmForCMS, "CMS", "#5bcfbb", "#555fa6");
mmForCMS.value = "64";
return mmForCMS;
}
private void CommonMoneyMovementsComponents(MoneyMovement mmForParties, params string[] arr)
{
Chart chartComponent = new Chart()
{
caption = arr[0],
subcaptionFontBold = "0",
lowerLimit = "0",
upperLimit = "100",
lowerLimitDisplay = "Start",
upperLimitDisplay = "End",
numberSuffix = "%",
showValue = "0",
showBorder = "0",
showShadow = "0",
tickMarkDistance = "5",
alignCaptionWithCanvas = "1",
captionAlignment = "center",
bgcolor = arr[1] //individual background component color
};
Color colorComponent = new Color()
{
minValue = "0",
maxValue = "100",
code = arr[2] //individual component color
};
ColorRange crForAgent = new ColorRange();
crForAgent.color = new List<Color>();
crForAgent.color.Add(colorComponent);
mmForParties.chart = chartComponent;
mmForParties.colorRange = crForAgent;
}
}
When we ran this in PostMan, we receive the below JSON
Now, it's time to consume the web services through AngularJS and use the Fusion VLead Chart for the Data Visualization part.
For this to happen we will create a "CashFlowAndCollectionReport.js" file where we will define the Module, Controller and the Service consumption.
var myApp = angular.module("myApp", []);
myApp.controller("CashFlowAndCollectionReportController", function($scope, $http){
$scope.displayChart = function(){
FusionCharts.ready(function () {
var moneyMovementForAgent; //declare an object that will hold the instance of the FusionChart for Agents
var moneyMovementForAgencies; //declare an object that will hold the instance of the FusionChart for Agencies
var moneyMovementForCMS;//declare an object that will hold the instance of the FusionChart for CMS
//invoke the service
var promiseGet = $http.get("http://localhost:60422/FusionChartReports/CashFlowAndCollectionReport");
promiseGet.then(function (promiseObj) {
// binding the data
$scope.dataSourceForAgent = promiseObj.data.agents;
$scope.dataSourceForAgencies = promiseObj.data.agencies;
$scope.dataSourceForCMS = promiseObj.data.cms;
// for money collected calculation
$scope.moneyCollectedForAgent = $scope.dataSourceForAgent.value;
$scope.moneyCollectedForAgencies = $scope.dataSourceForAgencies.value;
$scope.moneyCollectedForCMS = $scope.dataSourceForCMS.value;
$scope.totalMoneyCollected = Number($scope.moneyCollectedForAgent)
+Number($scope.moneyCollectedForAgencies)
+Number($scope.moneyCollectedForCMS);
// for percentage calculation
$scope.moneyCollectedForAgentPercentage = (($scope.moneyCollectedForAgent/$scope.totalMoneyCollected)*100).toFixed(2);
$scope.moneyCollectedForAgenciesPercentage = (($scope.moneyCollectedForAgencies/$scope.totalMoneyCollected)*100).toFixed(2);
$scope.moneyCollectedForCMSPercentage = (($scope.moneyCollectedForCMS/$scope.totalMoneyCollected)*100).toFixed(2);
var totalMoneyCollectedPercentage = Number($scope.moneyCollectedForAgentPercentage)
+Number($scope.moneyCollectedForAgenciesPercentage)
+Number($scope.moneyCollectedForCMSPercentage);
$scope.totalMoneyCollectedPercentage = totalMoneyCollectedPercentage.toFixed(2);
//for loading the charts
moneyMovementForAgent = new FusionCharts({
type: 'vled',
renderAt: 'chartContainerForAgent',
width: '150',
height: '300',
dataFormat: 'json',
dataSource : $scope.dataSourceForAgent
});
moneyMovementForAgencies = new FusionCharts({
type: 'vled',
renderAt: 'chartContainerForAgencies',
width: '150',
height: '300',
dataFormat: 'json',
dataSource : $scope.dataSourceForAgencies
});
moneyMovementForCMS = new FusionCharts({
type: 'vled',
renderAt: 'chartContainerForCMS',
width: '150',
height: '300',
dataFormat: 'json',
dataSource : $scope.dataSourceForCMS
});
//render the chart to the div which is chartContainer
moneyMovementForAgent.render("chartContainerForAgent");
moneyMovementForAgencies.render("chartContainerForAgencies");
moneyMovementForCMS.render("chartContainerForCMS");
},function (errorPl) { //if something went wrong
$log.error('failure loading the record', errorPl);
}
); //end of promise object
});//end Fusion Chart Ready Function
}; //end function displayChart
}); //end controller
Here we are consuming the WebAPI by using the promise object and then plugging the data source exposed by the API in the way Fusion Chart needs.
Finally we need to bind the data. For this, let us create "CashFlowAndCollectionReport.html" and add the below script
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cash Flow and Collection Report</title>
<link href="css/custom.css" rel="stylesheet">
<link href="css/custom2.css" rel="stylesheet">
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="CashFlowAndCollectionReport.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.container {
width: 100%;
height: 120px;
background: white;
text-align : center;
}
.centered-content {
display: inline-block;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
</style>
</head>
<body ng-controller="CashFlowAndCollectionReportController" ng-init='displayChart()'>
<h2 align="center">Cash Flow and Collection Report</h2>
<div class="container">
<div
id="chartContainerForAgent"
class="centered-content">
</div>
<div
id="chartContainerForAgencies"
class="centered-content">
</div>
<div
id="chartContainerForCMS"
class="centered-content">
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<table align="center" border="1" >
<thead>
<tr>
<th> </th>
<th bgcolor="#7ff6ff">Agent</th>
<th bgcolor="#e7c7eb">Agency</th>
<th bgcolor="#5bcfbb">CMS</th>
<th bgcolor="yellow">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>%</th>
<td bgcolor="#5a89ad"><span ng-bind = "moneyCollectedForAgentPercentage"></span></td>
<td bgcolor="#bf384f"><span ng-bind = "moneyCollectedForAgenciesPercentage"></span></td>
<td bgcolor="#555fa6"><span ng-bind = "moneyCollectedForCMSPercentage"></span></td>
<td bgcolor="#62e515"><span ng-bind = "totalMoneyCollectedPercentage"></span></td>
</tr>
<tr>
<th>Money Collected</th>
<td bgcolor="#5a89ad"><span ng-bind = "moneyCollectedForAgent"></span>?</td>
<td bgcolor="#bf384f"><span ng-bind = "moneyCollectedForAgencies"></span>?</td>
<td bgcolor="#555fa6"><span ng-bind = "moneyCollectedForCMS"></span>?</td>
<td bgcolor="#62e515"><span ng-bind = "totalMoneyCollected"></span>?</td>
</tr>
</tbody>
</table>
</body>
</html>
That's all we need to do for the complete integration.
N.B.~ This article assumes that users have previous experience in AngularJS and WebAPI. If not then here is a good point to start
- AngularJS How to tutorials
- CRUD Operation using Web API and MVC4
Conclusion
Hope this will be helpful. Thanks for reading the article. Zipped file attached.