JavaScript

Search results

Getting started with JavaScript Linear Gauge control

24 May 2022 / 4 minutes to read

This section explains you the steps to create a simple Linear Gauge and demonstrates the basic usage of the Linear Gauge component.

Dependencies

Following is the list of minimum dependencies required to use the Linear Gauge.

|-- @syncfusion/ej2-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-svg-base

Installation and Configuration

To get started with the LinearGauge component, clone the Essential JS 2 quickstart project from GitHub and install the necessary npm packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Configuring System JS

Syncfusion Linear Gauge packages can be mapped in the system.config.js configuration file.

System.config({
paths: {
    'syncfusion:': './node_modules/@syncfusion/',
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
    "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
    "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

The project is preconfigured with common settings (system.config.js ) to start with all Essential JS 2 components.

Adding Linear Gauge component to the Project

The Essential JS2 Linear Gauge component can be added to the application. To get started, add the Linear Gauge component to the app.ts and index.html files using the following code.

Add an HTML div element to act as the Linear Gauge element in the index.html file using the following code.

<!DOCTYPE html>
<html lang="en">

<head>
<title>EJ2 Linear gauge</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>

<body>
 <!-- container which is going to render the linear gauge -->
 <div id='container'>
 </div>
</body>

</html>

Import the LinearGauge component in the app.ts file to initialize the Linear Gauge and append the Linear Gauge instance to the #container.

import { LinearGauge } from '@syncfusion/ej2-lineargauge';

// initialize linear gauge component
let gauge: LinearGauge = new LinearGauge();

// render initialized linear gauge
gauge.appendTo('#container');

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm start

The below example shows a basic Linear Gauge component.

Source

Preview

index.ts

index.html

import { LinearGauge } from '@syncfusion/ej2-lineargauge';

let gauge: LinearGauge = new LinearGauge();
gauge.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Module Injection

Linear Gauge component is segregated into individual feature-wise modules. In order to use a particular feature, inject its corresponding feature module using LinearGauge.Inject() method. Please find the feature module name and description as follows.

Annotation - Inject this module to use the annotation features.
GaugeTooltip - Inject this module to use the tooltip features.

Now import the above mentioned modules from the Linear Gauge package and inject it into the LinearGauge component using LinearGauge.Inject method.

import { GaugeTooltip, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations, GaugeTooltip);

Adding the Linear Gauge Title

The title can be added to the Linear Gauge component using the title property in the Linear Gauge.

Source

Preview

index.ts

index.html

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
// Title for linear gauge
title: 'linear gauge'
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Axis Range

The range of the axis can be set using the minimum and maximum properties in the Linear Gauge.

Source

Preview

index.ts

index.html

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
    minimum: 0,
    maximum: 200
}]
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

To denote the axis values with temperature units, add the °C as suffix to each label. This can be achieved by setting the {value}°C to the format property in the labelStyle object of the axis. Here, {value} acts as a placeholder for each axis label.

To change the pointer value from the default value of the gauge, set the value property in pointers object of the axis.

Source

Preview

index.ts

index.html

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
    minimum: 0,
    maximum: 200,
    pointers: [{
        value: 140
    }],
    labelStyle: {
        format: '{value}°C'
    },
    ranges: [{
        start: 0,
        end: 80,
        startWidth:15,
        endWidth:15
    }, {
        start: 80,
        end: 120,
        startWidth:15,
        endWidth:15
    }, {
        start: 120,
        end: 140,
        startWidth:15,
        endWidth:15
    }, {
        start: 140,
        end: 200,
        startWidth:15,
        endWidth:15
    }]
}]
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Setting the value of the pointer

The pointer value is changed in the below sample using the value property in pointers object of the axis.

Source

Preview

index.ts

index.html

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes:[{
    pointers:[{
        value: 40,
        color: 'green'
    }]
}]
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Contents

Dependencies
Installation and Configuration
Configuring System JS
Adding Linear Gauge component to the Project
Run the application
Module Injection
Adding the Linear Gauge Title
Axis Range
Setting the value of the pointer

Contents

Dependencies
Installation and Configuration
Configuring System JS
Adding Linear Gauge component to the Project
Run the application
Module Injection
Adding the Linear Gauge Title
Axis Range
Setting the value of the pointer