How to bind the pointer value from a remote service in the Angular Circular Gauge?

The Angular Circular Gauge is a data visualization component that displays data on a circular scale. Unlike typical data-binding components that directly support a data source, the Circular Gauge requires data to be set manually. However, it is possible to fetch data from remote sources, such as a web service, and update the pointer value dynamically to reflect the data on the circular gauge. This section demonstrates how to bind a pointer value in the Angular Circular Gauge using data fetched from a Web API.

First, we need to create a Web API application with a Get method that returns a default value of 45. In the Angular application, we will use an HTTP request to fetch this value from the web service. Once the HTTP request is successful, the received value will be assigned to the pointer of the Circular Gauge using the setPointerValue method. Additionally, you can integrate a database into the web service method to return dynamic values to the Circular Gauge.

The below code example demonstrates how to bind the pointer value in the Angular Circular Gauge using 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 following sample and image illustrate the output generated by the code snippet above.

View the Web API sample in GitHub

View the Angular Sample in Github

Conclusion

I hope you enjoyed learning how to bind the pointer value in the Angular Circular Gauge using a Web API application.

You can refer to our Angular Circular Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Circular Gauge example to understand how to visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!