Gauge chart in Angular using angular-google-charts

Hi there,

Most of the cases we need to visualize the data through the graph or chart and it is more flexible to understand. Today we are going to develop a gauge chart in Angular using angular-google-charts and customize it. Angular-google-charts create the charts through scalable vector graphics (SVG). First of all, install the angular-google-charts using the following command.

npm install angular-google-charts

Now import the dependency module to app.module.ts file

imports: [
    BrowserModule,
.......................
    GaugeChartModule
  ],

In your component.ts file, import GoogleChartComponent

import {GoogleChartComponent} from 'angular-google-charts';

Now create view child and an object of GoogleChartComponent with initialization.

@ViewChild('googlechart', {static: true})
googlechart: GoogleChartComponent;
public gaugeChart: { type: string; data: (string | { v: number; f: string })[][]; options: { width: number; height: number; greenFrom: number; greenTo: number; redFrom: number; redTo: number; yellowFrom: number; yellowTo: number; minorTicks: number} } = {
  type: 'Gauge',
  data: [
    ['Water', 78]
  ],
  options: {
    width: 500,
    height: 500,
    greenFrom: 50,
    greenTo: 100,
    redFrom: 0,
    redTo: 20,
    yellowFrom: 20,
    yellowTo: 50,
    minorTicks: 5
  }
};

Add the HTML markup to view the chart.

<google-chart #asaf
              [title]="title"
              [type]="type1"
              [data]="data1"
              [columnNames]="columnNames1"
              [options]="options1"
              [width]="width"
              [height]="height">
</google-chart>

We have done almost. Now run the server and visit the URL. You will see the gauge chart below.

Gauge chart without percentage

Now if we want to show the percentage instead of the flat number we just need to add extra param called majorTicks. So our final typescript will be like below.

@ViewChild('googlechart', {static: true})
  googlechart: GoogleChartComponent;
  public gaugeChart: { type: string; data: (string | { v: number; f: string })[][]; options: { width: number; height: number; greenFrom: number; greenTo: number; redFrom: number; redTo: number; yellowFrom: number; yellowTo: number; minorTicks: number; majorTicks: string[] } } = {
    type: 'Gauge',
    data: [
      ['Water', {v: 65, f: '65%'}]
    ],
    options: {
      width: 500,
      height: 500,
      greenFrom: 50,
      greenTo: 100,
      redFrom: 0,
      redTo: 20,
      yellowFrom: 20,
      yellowTo: 50,
      minorTicks: 10,
      majorTicks: ['0%', '100%']
    }
  };
Now refresh the page and see the image like below.
Gauge chart with percentage

For more gauges, you can follow the below references:

[1] https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/Overview/Angular/Light/
[2] https://www.highcharts.com/demo/gauge-speedometer
[3] http://bl.ocks.org/msqr/3202712

11 Views

About Author

Nasir

Welcome to CodeKit.xyz. I am working in an automation company as a software engineer. From the deep thirst of learning, I have developed this platform.