Search results

Range

Add a range to the circular gauge dynamically

You can add a range to the circular gauge dynamically by pushing the new ranges to the circular gauge axes in button click.

To add ranges dynamically to the circular gauge, follow the given steps:

Step 1:

Initialize the circular gauge with one range.

Source
Preview
index.ts
index.html
import { CircularGauge, Range } from '@syncfusion/ej2-circulargauge';

// initialize the circular gauge
let circulargauge: CircularGauge = new CircularGauge({
  axes: [
    {
      minimum: 0, maximum: 120,
      // initialize the ranges
      ranges: [
        {
          start: 0, end: 20
        }
      ]
    }
  ]
});
// render initialized circular gauge
circulargauge.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>
    <button id="addRange">Add Range</button>
</body>

</html>

Step 2:

You can add ranges to the circular gauge dynamically using the button click event. In button click, add the new ranges to the circular gauge axes. To refresh the circular gauge, invoke the refresh method.

Source
Preview
index.ts
index.html
import { CircularGauge, Range } from '@syncfusion/ej2-circulargauge';
let circulargauge: CircularGauge = new CircularGauge({
  axes: [
    {
      minimum: 0, maximum: 120,
      ranges: [
        {
          start: 0, end: 20
        }
      ]
    }
  ]
});
circulargauge.appendTo('#element');

document.getElementById("addRange").onclick = function () {
  let start: number;
  let end: number;
  start = +(circulargauge.axes[0].ranges[circulargauge.axes[0].ranges.length - 1].start) + 20;
  end = start + 20;
  if (end > circulargauge.axes[0].maximum) {
    circulargauge.axes[0].maximum = end;
  }
  let range = { start: start, end: end };
  circulargauge.axes[0].ranges.push(new Range(<Range>(circulargauge.axes[0].ranges[0]), 'ranges', range));
  circulargauge.refresh();
}
<!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>
    <button id="addRange">Add Range</button>
</body>

</html>