Angular
Demos
Support
Forum
Download
Search results

Getting Started

This section explains you the steps required to create a simple circular gauge and demonstrate the basic usage of circular gauge control.

Dependencies

Below is the list of minimum dependencies required to use the circular gauge.

|-- @syncfusion/ej2-ng-circulargauge
    |-- @syncfusion/ej2-ng-base
    |-- @syncfusion/ej2-ng-buttons
    |-- @syncfusion/ej2-ng-popups
    |-- @syncfusion/ej2-circulargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Installation and Configuration

  • To setup basic Angular sample use following commands.
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup

  • Install circular gauge packages using below command.
npm install @syncfusion/ej2-ng-circulargauge --save

The above package installs circulargauge dependencies which are required to render the component in Angular environment

  • Syncfusion ej2-ng-circulargauge packages needs to be mapped in systemjs.config.js configuration file.
/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
       "syncfusion:": "https://cdn.syncfusion.com/ej2/", // syncfusion alias
      "angular:": "https://unpkg.com/@angular/"

    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // syncfusion bundles
      "@syncfusion/ej2-base": "node_modules/@syncfusion/ej2-base/dist/ej2-base.umd.min.js",
      "@syncfusion/ej2-circulargauge": "node_modules/@syncfusion/ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
      "@syncfusion/ej2-ng-base": "node_modules/@syncfusion/ej2-ng-base/dist/ej2-ng-base.umd.min.js",
      "@syncfusion/ej2-ng-circulargauge": "node_modules/@syncfusion/ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js",
      "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
      "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
      "@syncfusion/ej2-ng-buttons": "syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js",
      "@syncfusion/ej2-ng-popups": "syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js",

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);
  • Import CircularGauge module into Angular application(app.module.ts) from the package @syncfusion/ej2-ng-circulargauge [src/app/app.module.ts].
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the CircularGaugeModule for the CircularGauge component
import { CircularGaugeModule } from '@syncfusion/ej2-ng-circulargauge';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of ej2-ng-circulargauge module into NgModule
  imports:      [ BrowserModule, CircularGaugeModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
  • Modify the template in app.component.ts file to render the ej2-ng-circulargauge component [src/app/app.component.ts].
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  // specifies the template string for the CircularGauge component
  template: `<ejs-circulargauge id='container'></ejs-circulargauge>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }
  • Tooltip CSS files are available in the ej2-circulargauge package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

@import '../../node_modules/@syncfusion/ej2-circulargauge/styles/material.css';

Run the application

  • Now run the application in the browser using the below command.
npm start

The below example shows a basic Circular Gauge.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    // specifies the template string for the CircularGauge component
    template: `<ejs-circulargauge id="circular-container"></ejs-circulargauge>`
})
export class AppComponent {

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-ng-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-ng-circulargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, CircularGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Set Pointer Value

You can change the pointer value in the above sample using value property in pointers.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template:
    `<ejs-circulargauge id="circular-container">
        <e-axes>
            <e-axis>
                <e-pointers>
                    <e-pointer value=35></e-pointer>
                </e-pointers>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        // Initialize objects
    }

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-ng-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-ng-circulargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, CircularGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Previous
Next