JavaScript

Search results

Getting started with JavaScript Linear Gauge control

08 Apr 2021 / 4 minutes to read

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

Dependencies

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

|-- @syncfusion/ej2-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Installation and Configuration

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

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

LinearGauge packages need to be mapped in 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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-lineargauge": "syncfusion:ej2-charts/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.

Add Linear Gauge to the Project

Add the HTML div element for linear gauge into your index.html. [src/index.html]

<!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>

Now import the LinearGauge component into your index.ts to initialize a 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');

Now use the npm run start command to run the application in the browser.

npm run 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/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

LinearGauge component is segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature module using LinearGauge.Inject() method. For this application, we are going to use tooltip and annotation feature of the linear gauge. Please find relevant 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 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);

Add Gauge Title

You can add a title using title property to the linear gauge to provide quick information to the user.

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/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

You can set the range to the axis using minimum and maximum properties.

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/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, we can add °C as suffix to each label. This can be achieved by setting the {value}°C to the format property of labelStyle in the axis. Here, {value} acts as a placeholder for each axis label.

You can change the pointer value from the default value of the gauge by settings the value property in pointers option in 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/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>

Set Pointer Value

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

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/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
Add Linear Gauge to the Project
Module Injection
Add Gauge Title
Axis Range
Set Pointer Value

Contents

Dependencies
Installation and Configuration
Add Linear Gauge to the Project
Module Injection
Add Gauge Title
Axis Range
Set Pointer Value