Build Realtime AngularJS Dashboard with AngularJS and Bootstrap UI — Part 2
Building a Realtime AngularJS Dashboard using AngularJS and Bootstrap UI — Part 2
This post is a continuation of where we left off from our previous post “Building a Realtime AngularJS Dashboard using AngularJS and Bootstrap UI — Part 1“.
Creating our Tabs for the Dashboard

In order to create these toggable tabs, I have added the data-toggle=”tab” attribute to the HTML anchor tag. Then set the panes with the corresponding id to each tab. Additionally you will need to add the attribute class=”tab-pane” in the div tag. This ties each tab to each pane that it relates to.
<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#cpu_tab" ng-click="setTabIndex(tabIndex.CPU)"><i class="fa fa-laptop"></i> CPU</a></li> <li><a data-toggle="tab" href="#memory_tab" ng-click="setTabIndex(tabIndex.MEMORY)"><i class="fa fa-ticket"></i> Memory</a></li> <li><a data-toggle="tab" href="#disk_tab" ng-click="setTabIndex(tabIndex.DISK)"><i class="fa fa-database"></i> Disk</a></li> <li><a data-toggle="tab" href="#network_tab" ng-click="setTabIndex(tabIndex.IO)"><i class="fa fa-sitemap"></i> I/O & Network</a></li> <li><a data-toggle="tab" href="#os_tab" ng-click="setTabIndex(tabIndex.OS)"><i class="fa fa-windows"></i> OS / Java</a></li> </ul>
CPU Historical Graph using Sparkline Chart

<sparklinechart data="{{cpu.system_history_list}}" trigger="{{tabIndex}}" options="{type: 'line', width: '90%', height: '80px', tooltipFormat: '<span>{{prefix}}{{y}}{{suffix}}</span>', lineColor: 'blue', fillColor: 'lightblue'}"> </sparklinechart>
CPU Graph Canv Gauge

<canvas canv-gauge id="cpu_gauge1" value="{{cpu.system}}" options="{width: 150, height: 150, glow: true, title: 'System CPU', units: 'CPU %', highlights : [{ from : 0, to : 40, color : 'PaleGreen' }, { from : 40, to : 60, color : 'Khaki' }, { from : 60, to : 80, color : 'LightSalmon' }, { from : 80, to : 100, color : 'Red' }] }"> </canvas>
Canv-Gauge AngularJS Directive
After looking for a nice gauge implementation and finding Mikhus/Canv-gauge I was really excited. This is a nicely written component that integrates well with my real-time application. According to the documentation and by reviewing the source code, canv-gauge uses pure JavaScript and HTML5 canvas which makes it compatible with most modern browsers both on desktops and mobile devices. I subsequently began looking to see if their were any AngularJS implementations available on the web. Having exhausted my search results, I set out to create my own AngularJS directive to integrate with canv-gauge.
angular.module('ngCanvGauge', []) .directive('canvGauge', ['$timeout', function ($timeout) { return { restrict: 'EA', scope: { id: '@', class: '@', width: '=', height: '=', glow: '=', title: '@', units: '@', value: '@', strokeTicks: '=', ... ...
Download Canv-Gauge AngularJS Directive
I am planning on making the cang-gauge angularjs directive on Github as soon as possible. In the meantime, you are able to pull in the entire code base for this project at the end of this tutorial series.
Reviewing Process Statistics in the Real-Time Dashboard
<div class="x_content"> <span class="pull-left processIcon"></span> <div class="DetailsSlab"> <p class="title">{{procs.threads | number:0 }} Number of Threads, {{procs.total_procs | number:0 }} Number of Total Processes</p> <p class="title"> <br /> <br /> <br /> </p> </div> <div class="col-sm-10"> <nvd3 options="procs.options" data="procs.data"></nvd3> </div> <div class="col-sm-2"> <table class="tableInset"> <tr> <th>Process Details</th> </tr> <tr> <td>{{procs.threads | number:0 }} # of Threads</td> </tr> <tr> <td>{{procs.running_procs | number:0 }} Running</td> </tr> <tr> <td>{{procs.sleeping_procs | number:0 }} Sleeping</td> </tr> <tr> <td>{{procs.idle_procs | number:0 }} Idle</td> </tr> <tr> <td>{{procs.zombie_procs | number:0 }} Zombie</td> </tr> <tr> <td>{{procs.stopped_procs | number:0 }} Stopped</td> </tr> <tr> <td>{{procs.total_procs | number:0 }} Total</td> </tr> </table> </div> </div>
Memory Details in the Real-Time Dashboard
<div class="x_panel"> <div class="x_title"> <h2>Memory Statistics</h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"> <i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a ng-click="changeScale('kilobytes')">Display in Kilobytes</a></li> <li><a ng-click="changeScale('megabytes')">Display in Megabytes</a></li> <li><a ng-click="changeScale('gigabytes')">Display in Gigabytes</a></li> </ul></li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <span class="pull-left memoryIcon"></span> <div class="DetailsSlab"> <p class="title">{{memory.total_mem | number:0}} Bytes Total Memory</p> <p class="title"> <br /> </p> </div> <div class="col-sm-10"> <canvas id="line" width="500" height="250" class="chart chart-line" chart-data="data" chart-labels="labels" chart-colours="colors" chart-legend="false" chart-series="series" chart-options="{animation: false}"> </canvas> </div> <div class="col-sm-2"> <table class="tableInset"> <tr> <th>Memory Details</th> </tr> <tr> <td>{{memory.total_memory | number:0 }} {{memory.scale_precision}} Total</td> </tr> <tr> <td>{{memory.used_memory | number:0 }} {{memory.scale_precision}} Used</td> </tr> <tr> <td>{{memory.free_memory | number:0 }} {{memory.scale_precision}} Free</td> </tr> </table> </div> </div> </div>
Creating the Selectable Drive Icons for Real-Time Dashboard

<div class="col-sm-4 centered"> <div class="centered" justgage title="Disk Space" title-font-color="#999" customSectors="{{disk_details.customSectors}}" value="{{disk_details.use_percentage}}" value-font-color="#999" width="200" height="150" min="0" max="100" label="Used Percentage" label-font-color="#999" start-animation-time="300" start-animation-type="linear" refresh-animation-time="300" refresh-animation-type="linear" counter="true"> </div> </div>
Let’s View the Realtime AngularJS Dashboard GUI Screens
As you can see from the following screen shots, the UI is quite appealing in its design.
Associated Posts
- Building a Realtime AngularJS Dashboard using Spring Rest and MongoDB -- Part 1
In this tutorial we will cover implementing a Dashboard application using Periodic Refresh Pattern (Polling) via AJAX calls from AngularJS. - Building a Realtime AngularJS Dashboard using Spring Rest and MongoDB -- Part 2
The second part tutorial continues where the first left off and continues diving into the code base. - Building a Realtime AngularJS Dashboard using Spring Rest and MongoDB -- Part 3
In this last of three part tutorial finish up our deep dive and reveal the finishing touches to our real-time application. - Build Realtime AngularJS Dashboard with AngularJS and Bootstrap UI — Part 1
In this tutorial series, our focus will be on the User Interface (UI) using AngularJS, Bootstrap, and the various Javascript Charting and Graphing Libraries (Sparkline, NVD3, ChartJS, JustGage, and CanvGauge). - Build Realtime AngularJS Dashboard with AngularJS and Bootstrap UI — Part 2
The second part tutorial continues looking at the user interface (UI) components where the first left off and continues diving into the code base. - Build Realtime AngularJS Dashboard with AngularJS and Bootstrap UI — Part 3
In this last of three part tutorial finish up our deep dive into the UI and reveal the finishing touches to our real-time application.

Please Share Us on Social Media






Leave a Reply