RealTime Dashboard with ASP.NET Signalr, AngularJS and D3JS

About Signalr :

Asp.NET SignalR is a library for ASP.NET developers to push the content from server to connected clients and vise versa.

Reference Link: http://signalr.net/ ,  http://www.asp.net/signalr/

About AngularJS :

AngularJS is an opensource web application client side framework, maintained by Google and community.

Reference Link: https://angularjs.org/

About D3js :

D3.js is a javascript library for manipulating document based on data. It helps in bringing data to visualization using HTML,SVG and CSS.

Reference Link: http://d3js.org/

Okay We can start now. In this article we are going to see how to build real-time dashboard application using above technologies, for sample I took scenario of available waiting calls in the call centre  (contact center) on each department. so this sample real time dashboard will be benefit for contact center manager and supervisor to monitor how many customers are waiting in the queue to get the agent transfer.

Server Side Implementation:

SignalR is an abstraction over some of the transports (WebSoket,Server Sent Event ,Forever Frame,Ajax long polling ). It will also support  fallback. For example if we take WebSocket transpor,it should meet some of the system requirement from both server and client end.

Server end: Windows Server 2012 or Windows 8

Client  end: Html5 supported browser(IE 10+, chrome,etc..)

If any one of the requirement gets failed, obviously websocket will not work. Here  Signalr will do magic, automatically it will look for alternative supported transport.(Forever or Ajax). So developer don’t want to worry  about anything.

To Learn more about SignalR please visit following link http://www.asp.net/signalr/. In below we are going to see only how these technologies makes our Job easy to build real time solution.

The Server side Hub:

This will push content to clients.

Client Side Hub connection with (angularJS) :

Reference file require in HTML page.

We having  our client connection inside angular JS service because Service are singleton and easy to take control for callback.

Controller will  receive the data from service then pass to $scope variable  to update the user interface.

angular JS is two way binding, once the data updated in the controller, view automatically re-rendered based on updated values.

Inside view we have custom directive to  draw simple bar chat based on myData value. This custom directive we build with the help of D3.JS .

Now again we can go to server end. We have to pull the real time data from  database or some back end system with some specified interval  then push the data to all our subscribed client.

Really running scheduled background work in asp.net I will not suggest, Even this example we used official recommended approach  IReggisteredObject with the ASP.NET runtime and hook it up at application start.

For more robust solution even we can host the signalR explicit windows service.

In Application_Start method simply we can start our background thread.

Here we are simply pushing the data to all the connected clients, But real time we can do lot more,  maintain active client, identifying particular user and  pushing to only logged in clients, etc…

 

Snapshot :

demo_screen

 

2 thoughts on “RealTime Dashboard with ASP.NET Signalr, AngularJS and D3JS”

Leave a Reply

Your email address will not be published. Required fields are marked *