Angular Gauges - Variable Number of Bars

This demo shows how to use the API of the BarGauge to change the number of indicated values at runtime. For this purpose, an array of new values is passed as the parameter of the value method.

Backend API

<div class="long-title"><h3>Sampling by Goods</h3></div> <div id="gauge-demo"> <dx-bar-gauge id="gauge" [startValue]="0" [endValue]="50" [values]="values"> <dxo-bar-gauge-label> <dxo-bar-gauge-format type="fixedPoint" [precision]="0"> </dxo-bar-gauge-format> </dxo-bar-gauge-label> </dx-bar-gauge> <div id="panel"> @for(product of products; track product.name) { <dx-check-box [text]="product.name" [(value)]="product.active" (onValueChanged)="productsToValues()" ></dx-check-box> } </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxBarGaugeModule, DxCheckBoxModule } from 'devextreme-angular'; import { Product, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxBarGaugeModule, DxCheckBoxModule, ], }) export class AppComponent { products: Product[]; values: Product[]; constructor(service: Service) { this.products = service.getProducts(); this.productsToValues(); } productsToValues() { const values = []; this.products.forEach((product) => { if (product.active) { values.push(product.count); } }); this.values = values; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { height: 440px; width: 100%; } ::ng-deep #gauge { width: 80%; height: 100%; margin-top: 20px; float: left; } ::ng-deep #panel { width: 150px; text-align: left; margin-top: 20px; float: left; } ::ng-deep .dx-checkbox { margin-bottom: 10px; display: block; } ::ng-deep .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

import { Injectable, } from '@angular/core'; export class Product { name: string; count: number; active: boolean; } const products: Product[] = [{ name: 'Hammers', count: 41, active: true, }, { name: 'Shovels', count: 32, active: true, }, { name: 'Ladders', count: 13, active: true, }, { name: 'Watering cans', count: 48, active: true, }, { name: 'Screwdrivers', count: 24, active: true, }, { name: 'Nail pullers', count: 8, active: true, }, { name: 'Drills', count: 19, active: true, }]; @Injectable() export class Service { getProducts(): Product[] { return products; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>