Demonstration of Cash Flow via VLead Funnel Fusion Chart with AngularJS and WebAPI

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 634 red flag

In this article, we will look into the integration of Cash Flow via VLead Funnel Fusion Chart with AngularJS and WebAPI.


 Download source code for Demonstration of Cash Flow via VLead Funnel Fusion Chart with AngularJS and WebAPI

Recommendation
Read Integration of Funnel Fusion Chart with AngularJS and WebAPI before this article.

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

  1. AngularJS How to tutorials
  2. CRUD Operation using Web API and MVC4

Conclusion

Hope this will be helpful. Thanks for reading the article. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)