Add A Realtime Gauge To Your Angular Project

Does your Angular UI need a free, great looking gauge control for visualizing real-world data such as speed, rpm, temperature, weight, direction, progress, emotion or sentiment? If yes, then read on as I walk through the small set of steps for adding a live gauge to your Angular project.

I’m using the free open-source ng-beautiful-gauges module which works with Angular 6 or greater.  ng-beautiful-gauges provides customizable radial and linear gauges for Angular. Here are just a few example gauges that I’ve created (code). 

For this article we will use the ng-beautiful-gauges radial-gauge to create a simple speedometer in 3 short phases. In addition to the radial-gauge the ng-beautiful-gauges also includes a linear-gauge. It is useful for creating controls such as a thermometer. Upon completion of this tutorial I encourage you to explore the many styling options available as we will only touch on the most fundamental here.

Prerequisites

To get started you’ll need npm ver. 8.x or 10.x and angular ver. 6.0 or greater installed globally on your system. See this quick tutorial for setting up these prerequisites. An alternative to installing these prerequisites is to use Angular IDE for your project development which minimizes setting up prerequisites and includes smart TypeScript and Angular coding and debugging tools – use the free trial version to get started.

Phase-1: Get it Working

From a terminal we need to create an angular workspace with a default application named speedometer. Enter the following Angular command and accept the default response for any prompts you may receive. 

ng new speedometer

The Angular CLI will create the speedometer/ directory containing a default project by the same name.

Next change into the speedometer/ directory and install the ng-beautiful-gauges module using npm.

cd speedometer
npm i ng-beautiful-gauges

Now we need to import the ng-beautiful-gauges module into our main Angular app module.
Edit src/app/app.module.ts. Add lines #5 and #13. Don’t forget to add the ‘,’ on the end of line #12.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GaugesModule } from 'ng-beautiful-gauges';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GaugesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lastly, replace the app.component.html with the following:

<radial-gauge
    title="Speed"
    units="MPH"
    width="300"
    height="300"
    min-value="0"
    max-value="120"
    highlights='[]'
></radial-gauge>

The last step is to package and launch our app using the Angular development web-server. In the terminal, enter:

ng serve 

While the Angular server is running you can view the app on localhost:4200. Open your browser and give it a try: http://localhost:4200

Congrats! Your speedometer gauge is taking shape.

 

Phase-2: Get it Working Right – Make it Live

Our next step is to pump some velocity data into the gauge to move the needle. We will simulate a stream of velocity data using a RXJS interval Observable to produce random numbers between 1-120 every 1 second. See the ngOnInit() function for details.

Begin by modify your app.component.ts file as shown:

import { Component, OnInit } from '@angular/core';
import { Observable, interval, timer } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.componen

t.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  public value$: Observable<number>;

  ngOnInit() {
    this.value$ = interval(1000).pipe(
      map(() => Math.random() * 120)
    );
  }
}

Add the following line of code to app.component.html. This line binds the gauge property “value” to the component property “value$”, a RXJS Observable.

[value]="(value$ | async)
<radial-gauge
    [value]="(value$ | async)"
    title="Speed"
    units="MPH"
    width="300"
    height="300"
    min-value="0"
    max-value="120"
    highlights='[]'
></radial-gauge>

If “ng serve” is still running in your terminal you may have noticed that it is automatically detecting the file edits in the project and repackaged and updated the browser window. If the “ng serve” process is no longer running, restart it and open or refresh your browser to localhost:4200.

You should now see the speedometer’s needle and value text updating every second.

Phase-3: Make It Look Great

Returning to app.component.html we add a number of styling attributes that completely transform the default light themed gauge to a nice dark theme. Additional updates include red highlighted zone for the 80-120 range, larger colored fonts for the numbers and new gradient colored border and plate.

<radial-gauge
    [value]="(value$ | async)"
    title="Speed"
    units="MPH"
    width="300"
    height="300"
    
    min-value="0"
    max-value="120"
    major-ticks="0, ,20, ,40, ,60, ,80, ,100, ,120"
    minor-ticks="2"
    font-numbers-size="25"
    
    color-plate="#000"
    color-plate-end="#222"
    color-major-ticks="#888"
    color-minor-ticks="#ddd"
    color-title="#eee"
    color-units="#ccc"
    color-numbers="#bb1"
    highlights='[
        {"from": 80, "to": 120, "color": "rgba(200, 50, 50, .5)"}
    ]'

    needle-type="arrow"
    needle-width="2"
    needle-circle-size="7"
    needle-circle-outer="true"
    needle-circle-inner="false"
    color-needle-shadow-down="#550"
    color-needle-circle-outer="#333"
    color-needle-circle-outer-end="#111"
    animation-duration="900"
    animation-rule="linear"
    
    borders="true"
    border-inner-width="10"
    border-middle-width="1"
    border-outer-width="5"
    border-shadow-width="0"
    color-border-outer="#111"
    color-border-middle="#888"
    color-border-middle-end="#555"
    color-border-inner="#111"
    
    value-box="false"
></radial-gauge>

Special Notice

ng-beautiful-gauges is built on top of the open-source JavaScript canvas-gauges library. All of the canvas-gauge configuration options are available for use with your Angular gauge.

When configuring a gauge element using attributes, the canvas-gauge documentation attributes use a “data-” prefix, e.g., “data-highlights”. ng-beautiful-gauges does not require the “data-” prefix on attributes. Additionally kerbab name format is used for representing gauge properties as element attributes. 

Example:
   To represent the colorPlate property as an attribute of a gauge in html, enter it as “color-plate”  

Wrapping Up

With the proliferation of data of all types, especially that produced by IOT applications, gauges can be effective for data visualization. To learn more about what’s possible with ng-beautiful-gauges see the demo project in github and the many canvas-gauge examples.

The code for this project is available here.

Lastly I want to give a shout out to Angular IDE for really great Angular and TypeScript coding support. I used it exclusively for the development of all code referenced in this article and in the development and maintenance of the ng-beautiful-gauges module.