Angular BarGauge Component

The jqxBarGauge component from jqWidgets is a powerful tool for visualizing values in a circular bar format. This guide provides step-by-step instructions and examples for integrating and using jqxBarGauge in Angular applications.

Step 1: Install jqWidgets

Install the jqWidgets library in your Angular project using npm:

npm install jqwidgets-ng --save

Step 2: Add jqx.base.css

To ensure proper styling of the jqxBarGauge component, include the jqWidgets base CSS file in your project. Add the following line to the angular.json file under the styles array:

"styles": [
  "src/styles.css",
  "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css"
]

Step 3: Create a Standalone Component

Angular supports standalone components, a modern and streamlined approach for building Angular applications. This example demonstrates using jqxBarGauge in a standalone component.

Complete Example

Below is an example of a standalone Angular component using jqxBarGauge:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

// app.component.ts
import { Component } from '@angular/core';
import { jqxBarGaugeModule } from 'jqwidgets-ng/jqxbargauge';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [jqxBarGaugeModule],
  template: `
    <jqxBarGauge
      [max]="100"
      [values]="values"
      [colorScheme]="'scheme01'"
      (onDrawEnd)="handleDrawEnd($event)"
    ></jqxBarGauge>
  `,
  styles: [
    `
      jqxBarGauge {
        margin: auto;
        display: block;
      }
    `,
  ],
})
export class AppComponent {
  values = [30, 70, 90];

  handleDrawEnd(event: any): void {
    console.log('DrawEnd event triggered:', event);
  }
}

Additional Features

jqxBarGauge offers a wide range of features to enhance your visualizations:

• Animation: Use the built-in animation support to create smooth transitions for your data visualization.
• Color Customization: Apply custom color schemes or use predefined ones with the [colorScheme] property.
• Labels: Configure label positioning and formatting using properties like [labels] and [formatFunction].
• Dynamic Updates: Update the values dynamically by binding the [values] property to your application data model.
• Tooltips: Enable and customize tooltips for each bar using the [tooltip] property.

Event Handling

jqxBarGauge emits various events to help you create interactive applications. For example:

<jqxBarGauge
  [values]="values"
  (onDrawEnd)="handleDrawEnd($event)"
  (onValueChanged)="handleValueChanged($event)"
></jqxBarGauge>

In the component class:

handleDrawEnd(event: any): void {
  console.log('DrawEnd event:', event);
}

handleValueChanged(event: any): void {
  console.log('ValueChanged event:', event);
}

Conclusion

With this guide, you can seamlessly integrate jqxBarGauge into your Angular applications. Its customizable features and event-handling capabilities make it a great choice for data visualization. For more details and advanced usage, visit the jqWidgets documentation.