Articles in this section
Category / Section

How to get started easily with Syncfusion Angular 11 Circular gauge

4 mins read

A quick start project that helps you create an Angular 11 Circular Gauge with minimal code configuration.

 

CircularGauge

Circular-gauge features covered in this project

 

This Angular 11 circular gauge project is created using Angular CLI 11.2.3. The circular gauge features listed in this project are as follows.

  • Axis for circular gauge.
  • Range for circular gauge.
  • Pointer for circular gauge.
Project prerequisites

 

Make sure that you have the following compatible versions of TypeScript and Angular in your machine before starting to work on this project.

Angular 11 CircularGauge – Introduction

 

The Angular 11 circular gauge used in this project is created from the Syncfusion ‘ej2-angular-circulargauge’ package. You can simply define circular gauge as < ejs-circulargauge > within the template.

Dependencies

 

Before starting with this project, you need to add the Syncfusion `ej2-angular-circulargauge` package to the Angular 11 circular gauge from npmjs, which is distributed in npm as @syncfusion scoped packages.

Creating an Angular 11 Application

 

  1. To create an Angular application, install the Angular CLI globally using the following command.

 

npm install @angular/cli@11.2.3

 

  1. Then, create a new Angular application using the following command.

 

ng new angular11-app

cd angular11-app

 

This command downloads all the files needed and initializes the npm installation.

Installing the circulargauge component

 

After the Angular application has been created, use the following command to install the circular gauge package.

npm install @syncfusion/ej2-angular-circulargauge --save

 

The --save flag saves the circular gauge package as a dependency in the package.json file.

All configuration related to environment setup has now been completed. Before configuring the circular gauge, a component is needed to render the circular gauge. To create an Angular component, use the following Angular CLI command.

ng generate component circulargauge

 

Now, import the circular gauge module in the app.module.ts file.

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

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { CirculargaugeComponent } from './circulargauge/circulargauge.component';

import {CircularGaugeModule} from '@syncfusion/ej2-angular-circulargauge';

 

@NgModule({

  declarations: [

    AppComponent,

    CirculargaugeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    CircularGaugeModule

  ],

  providers: [CircularGaugeModule, AnnotationsService],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

Creating the circulargauge component

 

All the configurations related to the circular gauge has now been completed. Now, you need to define the first circular gauge in the circulargauge.component.html file.

<ejs-circulargauge></ejs-circulargauge>

 

Then, add the circular gauge component in the app.component.html file.

< app-circulargauge ></ app-circulargauge >

 

Go to the application directory, and launch the server by using following command.

ng serve --open

 

After all the files have been compiled successfully, the basic circular gauge will look like the following screenshot.

CircularGauge-app

Injecting Modules

 

Now, in the basic circular gauge, some features have been modularized and they available as a separate service, so you can use only the modules you need to keep your app lightweight. For example, if you want to visualize the circular gauge with annotation, define the providers of the app.module.ts file. This service provides access to the annotation functionality.

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

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { CirculargaugeComponent } from './circulargauge/circulargauge.component';

import {CircularGaugeModule, AnnotationsService} from '@syncfusion/ej2-angular-circulargauge';

 

@NgModule({

  declarations: [

    AppComponent,

    CirculargaugeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    CircularGaugeModule

  ],

  providers: [CircularGaugeModule, AnnotationsService],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

The following code sample demonstrates how to render the circular gauge.

<ejs-circulargauge  style='display:block;' id='range-container' #range=''>

  <e-axes>

      <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks' >

          <e-ranges>

              <e-range start=0 end=40 color='#30B32D'></e-range>

              <e-range start=40 end=80 color='#FFDD00'></e-range>

              <e-range start=80 end=120 color='#F03E3E'></e-range>

          </e-ranges>

          <e-pointers>

              <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap">

              </e-pointer>

          </e-pointers>

      </e-axis>

  </e-axes>

</ejs-circulargauge>

 

import { Component, OnInit, ViewChild } from '@angular/core';

import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge';

 

@Component({

  selector: 'app-circulargauge',

  templateUrl: './circulargauge.component.html',

  styleUrls: ['./circulargauge.component.css']

})

 

export class CirculargaugeComponent implements OnInit {

  @ViewChild('range')

    public circulargauge: CircularGaugeComponent;

    public lineStyle: object;

    public labelStyle: object;

    public majorTicks: object;

    public minorTicks: object;

    public tail: object;

    public pointerCap: object;

  constructor() { }

  ngOnInit() {

    this.lineStyle = {

     width: 10, color: 'transparent'

    };

  // Initializing LabelStyle

    this.labelStyle = {

      position: 'Inside', useRangeColor: false,

      font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }

    };

    this.majorTicks = {

      height: 10, offset: 5, color: '#9E9E9E'

    };

    this.minorTicks = {

      height: 0

    };

    this.tail = {

      length: '18%', color: '#757575'

    };

    this.pointerCap = {

      radius: 7, color: '#757575'

    };

  }

}

 

Circulargauge_modules

 

Annotation

 

After defining the AnnotationService in providers, you can access the annotation functionality from the circular gauge.

<ejs-circulargauge  style='display:block;' id='range-container' #range=''>

  <e-axes>

      <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [annotations]='annotaions'

          [lineStyle]='lineStyle' [minorTicks]='minorTicks' >

          <e-ranges>

              <e-range start=0 end=40 color='#30B32D'></e-range>

              <e-range start=40 end=80 color='#FFDD00'></e-range>

              <e-range start=80 end=120 color='#F03E3E'></e-range>

          </e-ranges>

          <e-pointers>

              <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap">

              </e-pointer>

          </e-pointers>

      </e-axis>

  </e-axes>

</ejs-circulargauge>

 

 import { Component, OnInit, ViewChild } from '@angular/core';

import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge';

 

@Component({

  selector: 'app-circulargauge',

  templateUrl: './circulargauge.component.html',

  styleUrls: ['./circulargauge.component.css']

})

 

export class CirculargaugeComponent implements OnInit {

  @ViewChild('range')

    public circulargauge: CircularGaugeComponent;

    public lineStyle: object;

    public labelStyle: object;

    public majorTicks: object;

    public minorTicks: object;

    public tail: object;

    public pointerCap: object;

    public annotaions: object;

 

  constructor() { }

  ngOnInit() {

    this.lineStyle = {

      width: 10, color: 'transparent'

    };

  // Initializing LabelStyle

    this.labelStyle = {

      position: 'Inside', useRangeColor: false,

      font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }

    };

    this.majorTicks = {

      height: 10, offset: 5, color: '#9E9E9E'

    };

    this.minorTicks = {

      height: 0

    };

    this.tail = {

      length: '18%', color: '#757575'

    };

    this.pointerCap = {

      radius: 7, color: '#757575'

    };

this.annotaions = [{

      content: '<div><span style="font-size:14px; color:#9E9E9E; font-family:Regular">Speedometer</span></div>',

      radius: '30%', angle: 0, zIndex: '1'

  }, {

      content: '<div><span style="font-size:24px; color:#424242; font-family:Regular">65 MPH</span></div>',

      radius: '40%', angle: 180, zIndex: '1'

  }];

  }

}

 

Run the application with the “ng serve” command in command prompt to view the output of the Angular 11 circular gauge.

You can explore the Angular 11 circulargauge with more options and you can also try playing with the downloadable example link in this knowledge base article.

Github source link:    https://github.com/SyncfusionExamples/ej2-angular-11-circular-gauge

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied