RealTime Pulse Monitor Using SignalR And Ignite UI igSparkline

Hey folks. Here I’m sharing a real time heart rate monitor app that I’ve created using SignalR and Ignite UI igSparkline chart. Ignite UI is so cool and comes in very handy when building adaptable UI for Line of Business applications.
Here’s an article, on Getting Started with Ignite UI igGrid from my recent posts:

• Getting Started with Ignite UI igGrid

Download the sample code for this demo from my GitHub Repo:

HeartRate Monitor Using SignalR & igSparkline.

Below is a snapshot of what I’ve built:



Prerequisite: Install Infragistics Ignite UI, if you haven’t installed it yet. (Alternatively, you can use CDN versions of JS scripts and CSS files referred). Here, I assume that you have an idea on how SignalR works.

Create an empty ASP.NET project.


Add SignalR using Nuget.



Install jQuery and jQuery UI the same way. Please note that I’m using version 1.6.4 of jQuery due to compatibility reasons with SignalR. You can find all the libraries in my sample code.

Add Startup.cs file (used to plug-in SignalR middleware) and add the following code.
Add a class HeartRateHub.cs and add the following code.

A SignalR hub inherits from Hub class. This way, it knows it is a hub and creates client proxies accordingly. The class contains two methods, PulseSimulator and GeneratePulse.

Since I do not have a device to measure heart rate, I’m trying to simulat it (yet it is not so accurate) using a timer in SimulatePulse method.

GeneratePulse method generated a random number as current pulse rate and broadcast to all connected clients.

Add an HTML page and add references to JS / CSS files

There’s a special reference “/signalr/hubs” which SignalR uses to render client proxies of the methods defined on server, so that client would know what functions are available on server.

Here is how you create an object of the proxy connection in JavaScript.

Add the method to receive data from server and update the chart.

hub.client is the container of all client side functions that a hub at server can ask for.

What it does is, whenever the data is received, it appends the new item at the end and removes an item from start.

Next is to start the connection and Invoke PulseSimulator method on server as soon as the connection to the hub is made successfully.

I have added some dummy data to initialize the igSparkline charts. The igSparkline charts accepts an Array of Objects having properties.

Add HTML containers for charts. I’m using three different display modes of igSparkline chart control - Line, Area and Column. It has one more “WinLoss” that I will skip for now.

Add scripts to initialize the igSparkline charts:

And that’s all it took from me to get it done.

After getting all the things, my Solution Explorer looked like this:



Here’s the complete code for each file separately.

Startup.cs