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

 

Object-Oriented Programming Basic

        This article is for people who want to learn basic before entering into programming life or who want to learn the foundation for programming. Any language  can be chosen only if you are strong in the concept before writing your code and automatically your code will be more powerful and reusable. Below are my examples which I  used for C# Language.

What is Oops?

Oops is a paradigm that is used while designing the application and computer programs. C# also provides full support for , Oops.

Basic Oops Concepts:

    • Classes and Object
    • Data Abstraction and Encapsulation
    • Inheritance
    • Polymorphism

Classes and Object

Class:

Class is a type of object or you can call it as a blueprint for the object instance, as how blueprint is created before building the house.

bluePrint

Example:

Object

Objects are usable instance of classes. It’s a building made from the blueprint called class. Its not logical rather it’s a physical existence that you can enter inside home and use all the properties that belong to it.

home

Example:

myHome is the instance of class type DreamHome. So myHome is built based on DreamHome blueprint.

Note:

class is a logical and object is a physical existence.

Member of Class:

  • Properties and Fields (To describe class data)
  • Methods(To describe class behavior)
  • Events(To Provide communication b/w different class and objects)

Data Abstraction and Encapsulation

Data Abstraction:

It’s a technique that is designed to separate interface and  implementation, i.e, providing essential information to outside world and hiding the background implementations.

Interface

       In the above picture, smart TV  is controlled by remote, so remote is the interface for remote user and TV. Here actual implementation is hidden from user and thereby user takes control of TV with limited facility that is available on remote, but user can’t control TV’s hardware which is present inside TV.

Encapsulation :

It’s a group of related properties, methods and other members that acts as a single unit or object.

Capsule

Interface Example: 

It’s a communication point to the outside world.

 

In the above example we have interface called IGuest, that was implemented in Home class. When guest comes to our home they have only limited access to our home. We will not allow them to access private areas(bed room) and only limited facility is exposed for them. From above example we have more methods but for the guest, they have access  only to CallingBell, OpenMainGate, EnterHall. So guest can’t enter bedroom.

Inheritance

Inheritance enables us to create new classes that can be reusable, extend, and modify the behavior that is defined in the base classes.

Example:

In the above example DreamHome class is inherited from the OldHome. So all the properties and members that belong to OldHome are accessible for the DreamHome. For example, we are re-using the fridge that we already used in our old home to our new DreamHome, which directly means that there is no requirement to buy a new one.

Types of Inheritance

  1. Single Inheritance
  2. Multilevel Inheritance
  3. Hierarchical Inheritance
  4. Hybrid Inheritance
  5. Multiple Interface

Polymorphism

Polymorphism is a third pillar of object-oriented programming, after encapsulation and inheritance. It gives ability of an object or reference to take many different forms at different instances.It has two category: compile time and run time

Compile Time Polymorphism:

The decision will be made at compile time.

Example:

Method overloading:

In the example we have two methods with same name, but the parameter is different so compiler will decide which method has to invoke in the compile time itself based on the input method param.

Run Time Plymorphism:

The decision made at Run time.

In the above example “Watch TV” method will be invoked in run time based on the instance created. If you enter DreamHome you can watch the TV Program in new LED Tv or if you enter Old home you can watch the program in old black and white TV. It’s the same method we implement here. But based on instance the decision will be made at application run time.