How to get started easily with Syncfusion Angular 4 CircularGauge?

4 mins read

A quick start project that helps you create an Angular 4 circulargauge with minimal code configuration.

Angular Circular Gauge Componet

Circular-gauge features covered in this project

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

Axis for circular gauge.
Range for circular gauge.
Pointer for circular gauge.

Project pre-requisites

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

Angular 4+
TypeScript 2.6+

Angular 4 CircularGauge – Introduction

The Angular 4 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 4 circular gauge from npmjs, which is distributed in npm as @syncfusion scoped packages.

Creating an Angular application

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

npm install @angular/cli@1.4

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

ng new my-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.

cd my-app

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 circular gauge 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.

Angular Arc Gauge Componet

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'

};

}

Angular Radial Gauge Componet

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 4 circular gauge.

You can explore the Angular 4 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-circular-gauge-angular-getting-started

Stackblitz sample link: https://stackblitz.com/edit/angular-1sc3v6?file=src%2Fapp%2Fcirculargauge.component.ts

Conclusion

I hope you enjoyed learning about how to get started easily with Syncfusion Angular 4 Circular Gauge.

You can refer to our Angular Circular Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Circular Gauge example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to get started easily with Syncfusion Angular 4 CircularGauge?

Access denied