Integration of Funnel Fusion Chart with AngularJS and WebAPI

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

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


 Download source code for Integration of 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 Funnel Fusion Chart with AngularJS and WebAPI.

What is a Funnel Chart?

Quoting Wiki

Funnel charts are a type of chart, often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization's sales processes.A funnel chart displays values as progressively decreasing proportions amounting to 100 percent in total. The size of the area is determined by the series value as a percentage of the total of all values. Any funnel consists of the higher part called head (or base) and the lower part referred to as neck.

Objective

Consider a scenario where say a total of 60 Customers has applied for Loan(s) from a bank. Out of which say 20 customers were Contacted, 16 Loans were Sanctioned and finally 4 were Disbursed.

The final output should be as under

Using the code

Let us first create the data structure

/// <summary>
/// This class contains the information about the Funnel Chart
/// <summary>
 public class Funnel
 {
        public string label { get; set; }
        public int value { 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 FusionChartReportController : ApiController
    {       

        [Route("FusionChartReports/FunnelReport")] 
        public List<Funnel> GetFunnelReport()
        {
            var lstFunnelData = new List<Funnel>();
            lstFunnelData.Add(new Funnel { label = "Customer Applied For Loan", value = 60 });
            lstFunnelData.Add(new Funnel { label = "Contacts", value = 20 });
            lstFunnelData.Add(new Funnel { label = "Sanctioned", value = 16 });
            lstFunnelData.Add(new Funnel { label = "Disbursed", value = 4 });

            var total = lstFunnelData.Sum(s => s.value);
            lstFunnelData.Add(new Funnel { label = "Total", value = total });

            return lstFunnelData;
        }
}

When we ran this in PostMan, we receive the below JSON

[
    {
        "label": "Customer Applied For Loan",
        "value": 60
    },
    {
        "label": "Contacts",
        "value": 20
    },
    {
        "label": "Sanctioned",
        "value": 16
    },
    {
        "label": "Disbursed",
        "value": 4
    },
    {
        "label": "Total",
        "value": 100
    }
]

Now, it's time to consume the web services through AngularJS and use the Fusion funnel Chart for the Data Visualization part.

For this to happen we will create a "FunnelReport.js" file where we will define the Module, Controller and the Service consumption.

var myApp = angular.module("myApp", []);
myApp.controller("FunnelReportController", function($scope, $http)
{
	$scope.displayChart = function(){

		FusionCharts.ready(function () {

		var funnelChart; //declare an object that will hold the instance of the FusionChart

		var chartLayout = {
					"caption": "Sales report",							
					"decimals": "1",							
					"labelDistance": "15",
					"plotTooltext": "Success : $percentOfPrevValue",
					"showPercentValues": "1",
					"theme": "fint"
				};

		//invoke the service
		var promiseGet = $http.get("http://localhost:60422/FusionChartReports/FunnelReport"); 

		promiseGet.then(function (promiseObj) 
		{	
			// binding the data					
			$scope.dataSource = { 'chart' : chartLayout, 'data': promiseObj.data };

			funnelChart = new FusionCharts({
							type: 'funnel',
							renderAt: 'chartContainer',
							width: "100%",
							dataFormat: 'json',
							dataSource : $scope.dataSource
					   });

				//render the chart to the div which is chartContainer
				funnelChart.render("chartContainer");
			},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 merging the JSON in the way Fusion Chart needs that. The Fusion Data Source needs a)chart and b)data. The later is coming from the API.

Finally we need to bind the data. For this, let us create "FunnelReport.html" and add the below script

<html>
	<head> 
	  <title>Funnel Report</title> 
	      <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="FunnelReport.js"></script>
	</head>
	<body ng-app="myApp" ng-controller="FunnelReportController">  
		<div 
			id="chartContainer"			
			ng-init='displayChart()'>
		</div>
  
	</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,Microsoft_MVP,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

Posted by: Raja on: 4/2/2016 | Points: 25
Too much article on FusionCharts that is not available free. Looks like these are sponsored posts. It would be good to show these kinds of examples on plug ins that are available free.

These articles doesn't make much sense.
Posted by: Rajnilari2015 on: 4/3/2016 | Points: 25
@Raja Sir, these FusionCharts we those what we are using in the project. It's not for advertisement. (:
Posted by: Sheonarayan on: 4/4/2016 | Points: 25
Thanks for information @Rajnilari, I think these articles will be useful for only limited set of users who are willing to buy FusionCharts.

I think we would love to read articles on the topic that are popping up or plugins that are freely available so that public at large can use it. Remember that community always rules.

Thanks Rajnilari.
Posted by: Rajnilari2015 on: 4/4/2016 | Points: 25
@Sheonarayan sir, sure Sir..But Sir, the main purpose for thses articles was to demonstrate the API integration with AngularJs (:

Login to post response

Comment using Facebook(Author doesn't get notification)