How to Build a Speedometer Using Angular Circular Gauge

TL;DR: Learn how to build a real-time speedometer dashboard using Syncfusion^® Angular Circular Gauge. This guide walks through customizing axes, pointers, annotations, and integrating RPM, fuel, and temperature gauges for a responsive vehicle telemetry UI.

Welcome to our Weekly Data Visualization blog series!

If you’re building a vehicle telemetry dashboard or an IoT interface, a speedometer-style gauge is a must-have. In this guide, you’ll learn how to use Syncfusion^® Angular Circular Gauge to create a responsive, real-time dashboard with speed, RPM, fuel, and temperature indicators, all in one sleek layout.

Syncfusion^® Angular Circular Gauge is a powerful and customizable component designed to bring your dashboard concepts to life with precision and style. We’ll walk you through the entire process, from concept to a fully functional speedometer dashboard, highlighting how Syncfusion’s Angular tools simplify complex UI development.

Whether you’re a seasoned Angular developer or just starting with dashboard design, this guide will equip you with the tools and techniques to build stunning, responsive gauges that look great and perform flawlessly.

Why choose Syncfusion^® Angular Circular Gauge?

The Syncfusion^® Angular Circular Gauge is a powerful data visualization component designed to display numeric values on a circular scale. It’s popular among developers and designers for building visually appealing and performance-oriented speedometer-style interfaces. Here’s why:

1. Rich customization options : Syncfusion’s Circular Gauge offers extensive customization, from needle styles and ranges to annotations and tick marks. Whether designing a sleek automotive dashboard or a vibrant fitness tracker, you can tailor every visual element to match your brand and user experience goals.

2. Interactive and responsive: The gauge supports tooltips, dynamic value updates, and responsive resizing. This makes it ideal for real-time applications where user engagement and data clarity are essential.

3. Built-in themes and styling: With built-in themes like Material, Bootstrap, Fluent, and Tailwind, you can quickly align the gauge with your application’s design language. You can also create custom styles to maintain a consistent visual identity.

4. High performance and lightweight: Despite its rich feature set, the component is optimized for performance. It renders smoothly even with complex configurations, ensuring a fluid user experience across devices and screen sizes.

To implement the Angular Circular Gauge component, refer to the official documentation.

Understanding the key elements

To begin, let’s understand the core components of the Circular Gauge and their roles in creating an effective and informative visualization:

1. Axes

The axis forms the circular scale that defines the range and layout of the gauge.
Example: In a speedometer, the axis might represent a range from 0 to 220 km/h or mph, providing the foundational structure for the gauge.

2. Ticks

Ticks indicate the intervals between numeric values and are categorized as major and minor ticks.
Example: In a fuel gauge, ticks help visualize fuel levels, alerting drivers when the tank is nearing empty.

3. Pointer

The pointer dynamically displays the current value on the gauge.
Example: In an engine temperature gauge, the pointer shows the coolant temperature, helping prevent overheating and ensuring optimal performance.

4. Annotation

Annotations display additional content such as text or images, within the gauge.
Example: An RPM gauge might include an annotation like 1000/min to indicate that the values represent engine revolutions per minute.

Step-by-Step: Building a Speedometer dashboard with Angular Circular Gauge

In this dashboard, we aim to define and render four essential gauges: the speed gauge, RPM gauge, fuel gauge, and engine temperature gauge. Each of these gauges plays a vital role in delivering real-time feedback and monitoring key metrics related to vehicle performance.

Let’s use the speed gauge as a foundational example to understand the design process, which can be adapted for the other gauges as well. The speed gauge provides instant feedback on vehicle velocity, typically displayed in kilometers per hour (km/h) or miles per hour (mph).

Step 1: Define the axis

• Begin by creating the outer rim or arc using the axis in Circular Gauge.

• Add major and minor ticks to clearly define speed intervals, ensuring accurate and readable measurements.

Step 2: Add the pointer

• Incorporate a pointer to dynamically indicate the vehicle’s current speed.

• This pointer updates in real time, giving users clear visibility of their driving speed at any moment.

Step 3: Configure annotations and visual cues

Enhance the gauge with annotations and visual indicators:

• Display the speed value in either km/h or mph, based on user preferences or regional standards.

• Add a red dot at the 50 km/h mark to promote safe driving practices.

• Include supplementary information, such as the total distance traveled (e.g., 35,758 km), to provide historical context and help users track their journeys.

The following code example creates the speedometer gauge design.

[app.component.html]

<ejs-circulargauge id="speedGauge" style="display:block;" width="100%" height="100%" background="black" (resized)="resize($event)">
  <e-axes>
    <e-axis radius="70%" startAngle="230" endAngle="130" minimum="0" maximum="200"
      [majorTicks]="outerSpeedMajorTicks"
      [minorTicks]="outerSpeedMinorTicks"
      [lineStyle]="outerSpeedLineStyle"
      [labelStyle]="outerSpeedLabelStyle">

      <e-annotations>
        <e-annotation
          content='<div style="color:white;font-size:14px;font-weight:700">Km/h</div>'
          angle="360"
          radius="40%"
          zIndex="1">
        </e-annotation>

        <e-annotation
          content='<div style="width: 8px;height: 8px;background-color: red;border-radius: 50%;"></div>'
          angle="297"
          radius="56%"
          zIndex="1">
        </e-annotation>

        <e-annotation
          content='<div style=" border-radius: 10px; justify-content: center; width: 65px; height: 25px; background-color: #414141;">
                     <div style="padding-top:5px;text-align:center;color:white;font-weight:700">35758</div>
                   </div>'
          angle="185"
          radius="40%"
          zIndex="1">
        </e-annotation>
      </e-annotations>

      <e-pointers>
        <e-pointer
          value="20"
          radius="55%"
          pointerWidth="8"
          [needleStartWidth]="2"
          [needleEndWidth]="2"
          color="#C10016"
          [animation]="outerSpeedAnimation"
          [cap]="outerSpeedCap"
          [needleTail]="outerSpeedTail">
        </e-pointer>

        <e-pointer
          value="200"
          pointerWidth="10"
          type="RangeBar"
          color="#000E43"
          radius="98%"
          [animation]="innerSpeedAnimation">
        </e-pointer>
      </e-pointers>

    </e-axis>
  </e-axes>
</ejs-circulargauge>

Speed indicator on a vehicle’s dashboard

Embedding RPM, fuel, and engine temperature gauges

Following the process used to design the speed gauge provides a solid blueprint for implementing the remaining gauges RPM, fuel, and engine temperature within the dashboard. These gauges are typically designed as arc or semi-circular gauges, which can be achieved by adjusting the start and end angles of their axes. Each of these gauges follows similar design principles and functionality, ensuring a cohesive and comprehensive monitoring system for key vehicle metrics.

Moving forward, the remaining gauges are designed based on specific UI requirements. One of the key challenges developers face is arranging these gauges effectively within the DOM to maintain a clean and professional layout. To address this, we propose a smart and scalable solution using the annotation feature of the Circular Gauge component.

In the case of the speed gauge, which serves as the primary gauge we utilize annotations to embed and position the RPM, fuel, and engine temperature gauges within its layout. You can refer to the code sample below, which is a prototype for this layout strategy. A complete working example is provided to help you implement this setup seamlessly.

[app.component.html]

<ejs-circulargauge id="speedGauge">
  <e-axes>
    <e-axis>
      <e-annotations>
        ...
        </e-annotation>

        <e-annotation
          [content]="RpmTemplate"
          angle="290"
          radius="0%"
          zIndex="1">
        </e-annotation>

        <e-annotation
          [content]="OuterRimTemplate"
          angle="90"
          radius="0%"
          zIndex="1">
        </e-annotation>

        <e-annotation
          [content]="FuelTemplate"
          angle="290"
          radius="0%"
          zIndex="1">
        </e-annotation>

        <e-annotation
          [content]="TemperatureTemplate"
          angle="290"
          radius="0%"
          zIndex="1">
        </e-annotation>
      </e-annotations>

      <e-pointers>
        ...
        ...
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

<ng-template #RpmGaugeTemplateRef>
  <ejs-circulargauge id="rpmGauge">
  </ejs-circulargauge>
</ng-template>

<ng-template #OuterRimGaugeTemplateRef>
  <ejs-circulargauge id="outerRimGauge">
  </ejs-circulargauge>
</ng-template>

<ng-template #FuelGaugeTemplateRef>
  <ejs-circulargauge id="fuelGauge">
  </ejs-circulargauge>
</ng-template>

<ng-template #TemperatureGaugeTemplateRef>
  <ejs-circulargauge id="temparatureGauge">
  </ejs-circulargauge>
</ng-template>

[app.component.ts]

export class AppComponent {
  @ViewChild('RpmGaugeTemplateRef')
  public RpmTemplate!: TemplateRef<any>;

  @ViewChild('OuterRimGaugeTemplateRef')
  public OuterRimTemplate!: TemplateRef<any>;

  @ViewChild('FuelGaugeTemplateRef')
  public FuelTemplate!: TemplateRef<any>;

  @ViewChild('TemperatureGaugeTemplateRef')
  public TemperatureTemplate!: TemplateRef<any>;

  …
  …
}

Vehicle dashboard with speedometer, RPM gauge, temperature, and fuel indicators

GitHub reference

To view the live demo of the code discussed above, check out the GitHub sample.

FAQs

Q1: How do the startAngle and endAngle affect the layout of each gauge?

The startAngle and endAngle properties of the axis are angle values in degrees, ranging from 0 to 360. These properties can be used to design arc and semi-circular gauges. For example, setting the startAngle to 270 and the endAngle to 90 will create a semi-circular gauge.

Q2: What’s the best way to handle real-time data updates in the Circular Gauge?

In a Circular Gauge, data is represented using pointers. These pointers can be updated dynamically either through property binding on the value property or by using the setPointerValue method. With these approaches, the gauge can be updated in real time from data sources such as WebSocket streams or RxJS Observables.

Q3: How do annotations affect performance when embedding multiple gauges within one layout?

When multiple gauges are embedded within one Circular Gauge component, there will be no negative impact on rendering speed. But there may be some irregular alignments in various sizes. To overcome this, we can set a min-width CSS style to the element containing the speed gauge.

Q4: Can the Circular Gauge component handle touch gestures or mobile interactions natively?

Yes, the Circular Gauge component supports touch gestures for displaying tooltips.

Q5: Is there a way to export the dashboard as an image or PDF for reporting purposes?

The Circular Gauge component supports exporting individual gauge elements. However, it does not natively support exporting annotations. To include annotations in the export, you can implement a custom solution at the application level by rendering the Circular Gauge as a foreignObject within an SVG element and then drawing it onto a Canvas element. This canvas can then be converted into an image for further use.

Conclusion

Thank you for reading! The Syncfusion^® Angular Circular Gauge empowers developers to build intuitive, real-time dashboards with precision and style. This comprehensive guide explores how this data visualization component can enhance dashboard design processes, providing insights into its customizable elements such as axes, ticks, pointers, and annotations. Whether you’re visualizing vehicle metrics or designing IoT interfaces, this component offers unmatched flexibility.

Leveraging the powerful customization features of Syncfusion^® Angular Circular Gauge, you can ensure your gauges are not just visually appealing but also immediately clear and insightful, helping users quickly understand the design.

Ready to build your own? Explore the new features of Essential Studio^® from the license and downloads page or take advantage of our 30-day free trial to transform your data narratives. If you’ve any questions or need support, contact us through our support forum, support portal, or feedback portal. Happy coding!

Related Blogs

• Design a Timer App using .NET MAUI Radial Gauge and Timer Picker

• Introducing the New .NET MAUI Digital Gauge Control

• Easily Create a Directional Compass Using .NET MAUI Radial Gauge

• Smartly Customize the Blazor Linear Gauge to Reproduce a Step Progress Bar