RealTime Pulse Monitor Using SignalR And Ignite UI igSparkline

Sunny Sharma
Jul 15, 2016
5.8k
0
4
Article

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. code
Add a class HeartRateHub.cs and add the following code.
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
code
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.
code
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.
code
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.
code
I have added some dummy data to initialize the igSparkline charts. The igSparkline charts accepts an Array of Objects having properties.
code
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.
code
Add scripts to initialize the igSparkline charts:
code
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

using Owin;
namespace HeartRateMonitor_Using_IgniteUI_Sparkline_Chart
{
public class Startup
{
public void Configuration(IAppBuilder appBuilder)
{
appBuilder.MapSignalR();
}
}
}

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Pulse Monitor using SignalR and IgniteUI igSparkline</title>
<meta charset="utf-8" />
<link href="css/structure/infragistics.css" rel="stylesheet" />
<link href="css/themes/bootstrap4/infragistics.theme.css" rel="stylesheet" />
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<script src="js/infragistics.core.js"></script>
<script src="js/infragistics.dv.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
var pulseData = [
{ "pulseRate": "98" },
{ "pulseRate": "50" },
{ "pulseRate": "40" },
{ "pulseRate": "70" },
{ "pulseRate": "90" },
{ "pulseRate": "30" },
{ "pulseRate": "70" },
{ "pulseRate": "20" },
{ "pulseRate": "30" },
{ "pulseRate": "57" },
{ "pulseRate": "80" },
{ "pulseRate": "70" },
{ "pulseRate": "90" },
{ "pulseRate": "30" },
{ "pulseRate": "70" },
{ "pulseRate": "75" },
{ "pulseRate": "63" },
{ "pulseRate": "70" },
{ "pulseRate": "65" }
];
$(function () {
// Declare a proxy to reference the signalr hub.
var hub = $.connection.heartRateHub;
hub.client.updatePulse = function (pulseData) {
$("#sparkline_LineChart,#sparkline_AreaChart,#sparkline_ColumnChart")
.igSparkline("insertItem", JSON.parse(pulseData))
.igSparkline("removeItem", 0);
}
// Start the connection.
$.connection.hub.start()
.done(function () {
hub.invoke("PulseSimulator");
});
// Initialize igSparkline charts
$("#sparkline_LineChart")
.igSparkline({
dataSource: pulseData,
valueMemberPath: 'pulseRate'
});
$("#sparkline_AreaChart")
.igSparkline({
dataSource: pulseData,
valueMemberPath: 'pulseRate',
displayType: 'area'
});
$("#sparkline_ColumnChart")
.igSparkline({
dataSource: pulseData,
valueMemberPath: 'pulseRate',
displayType: 'column'
});
});
</script>
<style>
.chart {
width: 40%;
height: 200px;
float: left;
margin-left: 20px;
padding-bottom: 60px;
margin-bottom: 10px;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div id="container">
<div id="HeartRateMonitor">
<div id="sparkline_LineChart" class="chart">
<h4>Pulse Rate - Line Chart</h4>
</div>
<div id="sparkline_AreaChart" class="chart">
<h4>Pulse Rate - Area Chart</h4>
</div>
<div id="sparkline_ColumnChart" class="chart">
<h4>Pulse Rate - Column Chart</h4>
</div>
</div>
</div>
</body>
</html>

HeartRateHub.cs

using System;
using System.Threading;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;
namespace HeartRateMonitor_Using_IgniteUI_Sparkline_Chart
{
public class HeartRateHub : Hub
{
private static Timer _timer;
private readonly Random _rnd = new Random();
public void PulseSimulator()
{
if (_timer == null)
{
_timer = new Timer(GeneratePulse, null, 3000, 1000);
}
}
public void GeneratePulse(object state)
{
var pulseRate = new {pulseRate = _rnd.Next(60, 100)};
Clients.All.updatePulse(JsonConvert.SerializeObject(pulseRate));
}
}
}

The rest of everything comes with the infrastructure. And, that wraps up this post. I will be back with more on Ignite UI controls, soon. Launch the app to see the data coming from the server in real time, and the charts being updated with the same.

Explore more on igSparkline here.
Start with Ignite UI controls by downloading a free trial here.
Learn more about SignalR.

I hope you enjoyed reading. Please share your valuable feedback in the comments section.