How to Bind Pointer Value from Remote in Angular Circular Gauge?

The Angular Circular Gauge is a data visualization tool designed to present information on a circular scale. Unlike conventional data-binding components that directly link to a data source, the Circular Gauge requires manual data input. However, it allows dynamic updates by retrieving data from external sources, such as web services, to adjust the pointer value accordingly. This guide explains how to bind a pointer value to the Angular Circular Gauge using data retrieved from a Web API.

To begin, create a Web API application with a Get method that returns a default value of 45. In the Angular application, an HTTP request will be used to fetch this value from the web service. Upon successfully receiving the data, the value will be assigned to the Circular Gauge pointer using the setPointerValue method. Moreover, you can enhance the web service by integrating a database to supply dynamic values for the Circular Gauge.

The following code example illustrates how to bind the pointer value in the Angular Circular Gauge with data fetched from a Web API application:

HomeController.cs

using System;

namespace HelloWebAPI.Controller
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class HelloController : ApiController
    {

        [HttpGet]
        public int Get()
        {
            //You can connect to the database and perform the necessary operations. Once the process is complete, you can obtain and send the required value to the gauge as shown in the return statement below. In our example, we're sending a dummy value to help you understand the flow.

            return 45;
        }

        [HttpPost]
        public void Post()

        {
            
        }

    }
}

app.component.html

<div class="control-section" style="margin-top:100px">
  <ejs-circulargauge #gauge style="display:block;" [height]="height" [allowMargin]="allowMargin"
    background="transparent" (loaded)="loaded($event)" [tooltip]="tooltip" [legendSettings]="legendSettings">
    <e-axes>
      <e-axis radius="105%" startAngle="270" endAngle="90" [minimum]="minimumValue" [maximum]="maximumValue"
        [majorTicks]="majorTicks" [minorTicks]="minorTicks" [lineStyle]="lineStyle" [labelStyle]="labelStyle"
        [annotations]="annotations">
        <e-ranges>
          <e-range start="0" end="50" startWidth="40" endWidth="40" radius="80%" color="#C5D8A4" legendText="Poor">
          </e-range>
          <e-range start="50" end="60" startWidth="40" endWidth="40" radius="80%" color="#F7EB09"
            legendText="Satisfied"></e-range>

          <e-range start="60" end="100" startWidth="40" endWidth="40" radius="80%" color="#30B32D"
            legendText="Excellent"></e-range>
        </e-ranges>
        <e-pointers>
          <e-pointer [value]="pointerValue" radius="70%" [pointerWidth]="pointerWidth" [needleEndWidth]="needleEndWidth"
            [cap]="cap">
          </e-pointer>
        </e-pointers>
      </e-axis>
    </e-axes>
  </ejs-circulargauge>
</div>
<style>
  .control-section {
    min-height: 450px;
  }
</style>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterOutlet } from '@angular/router';
import { CircularGaugeAllModule } from '@syncfusion/ej2-angular-circulargauge';

import { delay } from 'rxjs/operators';
import {
  ILoadedEventArgs,
  CircularGaugeComponent,
} from '@syncfusion/ej2-angular-circulargauge';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CircularGaugeAllModule, HttpClientModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  @ViewChild('gauge')
  public circularGauge?: CircularGaugeComponent;
  public height: string = '200px';
  public allowMargin: boolean = false;
  public pointerWidth: number = 5;
  public needleEndWidth: number = 2;
  public pointerData: any;
  public minimumValue: number = 0;
  public maximumValue: number = 100;
  public pointerValue: number = 10;
  constructor(private http: HttpClient) { }

  public titleStyle: Object = {
    fontFamily: 'inherit',
    size: '18px',
  };

  public animation: Object = {
    enable: false,
  };

  public legendSettings: Object = {
    visible: false,
    position: 'Bottom',
    width: '55%',
    textStyle: {
      fontFamily: 'inherit',
      size: '12px',
    },
  };

  public tooltip: Object = {
    enable: true,
    template:
      '<div style="font-size:18px;background:white;width:180px;color:#595959;border:1px solid #e8e8e8">Current Score: ' +
      this.pointerValue +
      '</div>',
  };

  public annotations: Object = [
    {
      content:
        '<div style="font-size:16px;margin-top: 15px;font-family: inherit;">' +
        this.pointerValue +
        '</div>',
      angle: 0,
      zIndex: '1',
      radius: '-10%',
    },
  ];

  public majorTicks: Object = {
    height: 0,
    width: 0.5,
    interval: 100,
    offset: 35,
  };

  public minorTicks: Object = {
    height: 0,
  };

  public lineStyle: Object = {
    width: 0,
  };

  public labelStyle: Object = {
    font: {
      size: '12px',
      fontFamily: 'inherit',
    },
    position: 'Outside',
    offset: -40,
  };

  public cap: Object = {
    radius: 5,
    border: { width: 2 },
  };

  public loaded(args: ILoadedEventArgs): void {
    this.updateAnnotationAndTooltipValue();
    this.updatePointerValue();
  }

  updateAnnotationAndTooltipValue() {
    if (this.circularGauge && this.circularGauge.axes && this.circularGauge.axes[0] && this.circularGauge.axes[0].annotations && this.circularGauge.axes[0].annotations[0]) {
      const annotation = this.circularGauge.axes[0].annotations[0];
      const tooltip = this.circularGauge.tooltip;
      if (annotation.content !== '<div style="font-size:16px;font-family:inherit;margin-top:15px;color:black">' + this.pointerValue + '</div>') {
        annotation.content =
          '<div style="font-size:16px;font-family:inherit;margin-top:15px;color:black">' +
          this.pointerValue +
          '</div>';
      }

      // Check if the tooltip template is different before updating
      if (tooltip.template !== '<div style="font-size:18px;background:white;width:180px;color:#595959;border:1px solid #e8e8e8">Current Score: ' + this.pointerValue + '</div>') {
        tooltip.template =
          '<div style="font-size:18px;background:white;width:180px;color:#595959;border:1px solid #e8e8e8">Current Score: ' +
          this.pointerValue +
          '</div>';
      }
    }
  }

  updatePointerValue() {
    this.http
      .get<object>('https://localhost:44373/api/hello')
      .pipe(delay(1000))
      .subscribe((data) => {
        this.pointerData = data;
        this.pointerValue = parseFloat(this.pointerData);
        this.circularGauge?.setPointerValue(0, 0, this.pointerValue);
      });
  }
}

The sample and image below demonstrate the results produced by the aforementioned code snippet.

View the Web API sample in GitHub

View the Angular Sample in Github

Conclusion

We hope you found the discussion on binding pointer values from remote sources in the Angular Circular Gauge informative.

For further details about its additional features, please visit our Angular Circular Gauge feature tour page. To learn about configuration specifications and how to get started quickly, refer to the documentation. Additionally, explore our Angular Circular Gauge example to better understand data visualization.

Existing customers can access our components from the License and Downloads page. If you are new to Syncfusion, we encourage you to try our 30-day free trial to explore all our controls.

For any questions or clarifications, feel free to leave a comment below. You can also reach us through our support forums, BoldDesk Support, or feedback portal. We are always here to assist you!