How to get started easily with Syncfusion Angular 11 Circular gauge
A quick start project that helps you create an Angular 11 Circular Gauge with minimal code configuration.
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.
- Node.js (Latest version)
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio code for Editor
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
- To create an Angular application, install the Angular CLI globally using the following command.
npm install @angular/cli@11.2.3
- 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.
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'
};
}
}
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
