Getting Started with Syncfusion® JavaScript (ES5) Linear Gauge Control

22 Jul 20264 minutes to read

Build your first Syncfusion JavaScript (ES5) application with a Linear Gauge in a few minutes. This quickstart guides you through creating a minimal HTML page, loading the required Syncfusion scripts from the CDN, initializing the Linear Gauge, and configuring its title, axis, labels, and pointer.

Prerequisites

Register your Syncfusion license key before using the component. For more information, refer to the license key registration documentation.

Dependencies

The Linear Gauge component is available in the @syncfusion/ej2-lineargauge package. The following dependencies are required:

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

@syncfusion/ej2-pdf-export is required only when using PDF export features.

Quick Setup

Step 1: Create the Folder and Files

Create a folder named quickstart in your preferred directory.

Inside the quickstart folder, create the following files:

  • index.html
  • index.js

Step 2: Add Syncfusion® CDN Resources

You can load the Linear Gauge component by using individual package scripts or the combined Syncfusion bundle. Choose only one of these approaches.

Individual Package Scripts

Add the following script references to the <head> section of index.html. Load the dependencies before the Linear Gauge component script.

<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lineargauge/dist/global/ej2-lineargauge.min.js" type="text/javascript"></script>

Combined Bundle

Alternatively, load all Syncfusion JavaScript components from a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>

Do not include the combined bundle together with the individual package scripts.

Step 3: Add the Syncfusion® Linear Gauge Control to the Application

The index.html file contains the Linear Gauge container and references a separate index.js file that contains the component initialization.

The global scripts added in Step 2 register the ej.lineargauge.LinearGauge class in the ej namespace. Therefore, no module imports are required.

var lineargauge = new ej.lineargauge.LinearGauge();
lineargauge.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">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The new ej.lineargauge.LinearGauge({...}) call creates the Linear Gauge component and the lineargauge.appendTo('#element') renders the component inside the <div id="element"> element declared in index.html.

Step 4: Open the Application in a Browser

Open quickstart/index.html through a local web server.

If you are using the Visual Studio Code Live Server extension:

  1. Right-click index.html in the Explorer.
  2. Select Open with Live Server.
  3. Open the URL displayed by Live Server, such as http://127.0.0.1:5500/.

The browser displays the initialized Linear Gauge.

Output

After completing the quick setup, the browser displays a Linear Gauge.

Syncfusion Linear Gauge Quick Start Output

Troubleshooting

  • The page is blank. Open index.html through a local web server instead of opening the file directly from the file system.
  • ej is not defined. Ensure that the Syncfusion CDN scripts are loaded before index.js.
  • ej.lineargauge is undefined. Verify that ej2-lineargauge.min.js is loaded after ej2-base.min.js and ej2-svg-base.min.js.
  • The Linear Gauge is not displayed. Ensure that the container ID in index.html matches the selector passed to appendTo('#element').