Hi all. Let’s create responsive dashboard using
– AngularJS
– Bootstrap
– SignalR
– Highcharts

This sample project based on tons of resources on internet.I have listed few of them below. You can download this project on GitHub (https://github.com/uwudamith/Dashboard). Feel free to download and modify the dashboard project.
Entire prototype has developed using SignalR services. Server will push data into the client without refreshing the browser. That is the beauty of Real Time applications. All charts are based on Highcharts. Layout based on Bootstrap css, so it is responsive by default.

Runtime

ServerPerformance

customer

Charts

SiganalR hub proxy factory

var signalRHubProxy = function ($rootScope, signalRServer) {
    
    function signalRHubProxyFactory(serverUrl, hubName, startOptions) {
        var connection = $.hubConnection(signalRServer);
        var proxy = connection.createHubProxy(hubName);
        connection.start(startOptions).done(function () { });

        return {
            on: function (eventName, callback) {
                proxy.on(eventName, function (result) {
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback(result);
                        }
                    });
                });
            },
            off: function (eventName, callback) {
                proxy.off(eventName, function (result) {
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback(result);
                        }
                    });
                });
            },
            invoke: function (methodName, callback) {
                proxy.invoke(methodName)
                    .done(function (result) {
                        $rootScope.$apply(function () {
                            if (callback) {
                                callback(result);
                            }
                        });
                    });
            },
            connection: connection
        };
    };

    return signalRHubProxyFactory;
};

Calling the factory from angular controller

var serverPerformanceController = function ($scope, signalRHubProxy) {

    $scope.RamCpu = {
        RamUsage: '0',
        CpuUsage: '0',
        Total:'0'
    };

    var clientPushHubProxy = signalRHubProxy(
       signalRHubProxy.defaultServer, 'MyHub',
           { logging: true });

    clientPushHubProxy.on('serverPerformanceDetails', function (data) {
        $scope.RamCpu = data;
        var x = clientPushHubProxy.connection.id;
    });
};

Injecting service into chart controller

// Declare angular application
var dashboardApp = angular.module('dashboardApp', ['ui.bootstrap', 'highcharts-ng']);

// Service declaration
dashboardApp.service('chartdataService', ['$rootScope', '$http', chartdataService]);

// Factory declaration
dashboardApp.factory('signalRHubProxy', ['$rootScope', signalRHubProxy]);

// Controllers declaration
dashboardApp.controller('chartController', ['$scope', '$log', '$timeout', '$interval', 'chartdataService', 'signalRHubProxy', chartController]);

Binding data into html pages

<div class="row" ng-controller="serverPerformanceController">
    <div class="col-md-3">
        <div class="panel panel-warning text-center">
            <div class="panel-body">
                <h1 class="text-info">{{RamCpu.RamUsage}} MB</h1>
            </div>
            <div class="panel-footer panel-info">Available RAM</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel panel-warning text-center">
            <div class="panel-body">
                <h1 class="text-info">{{RamCpu.CpuUsage}} %</h1>
            </div>
            <div class="panel-footer panel-info">Total RAM</div>
        </div>
    </div>
</div>

Background timer application

public class BackgroundServerTimeTimer : IRegisteredObject
    {
        private readonly Timer _timer;
        private readonly Timer _timer1;
        private readonly IHubContext _hubContext;

        public BackgroundServerTimeTimer()
        {
            HostingEnvironment.RegisterObject(this);
            _hubContext = GlobalHost.ConnectionManager.GetHubContext();
            _timer = new Timer(OnTimerElapsed, null,TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(5));
            _timer1 = new Timer(OnTimerElapsed1, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));
        }

        private void OnTimerElapsed(object sender)
        {
            _hubContext.Clients.All.monthlyRainFall(DashboardData.GetChartDataForDashboard());
            _hubContext.Clients.All.customerInformations(DashboardData.GetCustomerInformations());
        }
        private void OnTimerElapsed1(object sender)
        {
            var server = new ServerPerformanceUtility();

           _hubContext.Clients.All.serverPerformanceDetails(server.GetServerPerformance());

        }

        public void Stop(bool immediate)
        {
            _timer.Dispose();
            _timer1.Dispose();
            HostingEnvironment.UnregisterObject(this);
        }
    }

One thought on “Create Responsive + Bootstrap + SignalR + ASP.NET MVC c# + AngularJS Real time dashboard

  1. Hello, this is great article. Thanks! The sample app works fine on my local machine, but the graphs are not displaying when I put the same code on the test server. No errors are being logged in the server logs. Windows Server 2012 with Websockets enabled. .net 4.5 Any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s