Getting Started

28 Sep 202324 minutes to read

This section encompasses how to configure Circular Gauge. You can provide data to a Circular Gauge and make them to display in a required way.
The following screen shot displays a Circular Gauge, which visually represents the functions of an Automobile speedometer with RPM (Rotation per Minute), kph (Kilometer per hour) and it denotes the speed level indicators (Safe, Caution and Danger).

Analog Speedometer

Create a Circular Gauge

You can easily create the Circular Gauge widget by using the following steps.

1.First create a TypeScript project and the references in the app.ts page

For common getting started of TypeScript , you can refer here.

The default type definition file ej.web.all.d.ts needs to include the support for type-checking while initializing any of the Syncfusion widgets.

The important step you need to do is to copy the ej.web.all.d.ts file into your project and then need to refer it in your TypeScript application (app.ts file), so that you will get the intelliSense support and also the compile time type-checking.

You can find the ej.web.all.d.ts file in the following location,

(installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\typescript

Apart from ej.web.all.d.ts file, it is also necessary to make use of the jquery.d.ts file in your TypeScript application, which can be downloaded from here.

2.Add the following scripts in the HTML page

HTML

<!DOCTYPE html>
<html>
<head>
        <link href="http://cdn.syncfusion.com/24.2.3/js/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js" type="text/javascript"></script>
        <script src="app.js"></script> 
</head>
<body>
</body>
</html>

In the above code, ej.web.all.min.js script reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use [CSG](https://csg.syncfusion.com/ “”) utility to generate a custom script file with the required widgets for deployment purpose.

3.Create a <div> tag.

HTML

<html> <body> <div id="CircularGauge"></div> </body> </html>

4.Initialize the CircularGauge in ts file by using the ej.CircularGauge method.

JAVASCRIPT

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />
module CircularGaugeComponent {
    $(function () {
        var circularGaugeSample = new ej.datavisualization.CircularGauge($("#CircularGauge"));
    });
}

Run the above code example to get a default CircularGauge with default values.

Set Height and Width

Pointers have different height and width so you can set the height and width of the gauge according to your requirements.Set the basic values of the gauge such as height and width of the canvas element values that are to be rendered.

JAVASCRIPT

$(function () {
        var circularGaugeSample = new ej.datavisualization.CircularGauge($("#CircularGauge"),{
            width: 500,
            height:500
                   
        });
    });