Angular Gauges - Linear Gauge

This demo illustrates data binding in the LinearGauge component. The bound data changes when a user selects a new location in the City drop-down menu.

Backend API

<div class="long-title"><h3>Weather Indicators</h3></div> <div id="gauge-demo"> <dx-linear-gauge class="gauge-element" [value]="weatherData.temperature"> <dxo-linear-gauge-title text="Temperature (°C)"> <dxo-linear-gauge-font [size]="16"></dxo-linear-gauge-font> </dxo-linear-gauge-title> <dxo-linear-gauge-geometry orientation="vertical" ></dxo-linear-gauge-geometry> <dxo-linear-gauge-scale [startValue]="-40" [endValue]="40" [tickInterval]="40" ></dxo-linear-gauge-scale> <dxo-linear-gauge-range-container backgroundColor="none"> <dxi-linear-gauge-range [startValue]="-40" [endValue]="0" color="#679EC5" ></dxi-linear-gauge-range> <dxi-linear-gauge-range [startValue]="0" [endValue]="40" ></dxi-linear-gauge-range> </dxo-linear-gauge-range-container> </dx-linear-gauge> <dx-linear-gauge class="gauge-element" [value]="weatherData.humidity"> <dxo-linear-gauge-value-indicator type="rhombus" color="#A4DDED" ></dxo-linear-gauge-value-indicator> <dxo-linear-gauge-title text="Humidity (%)"> <dxo-linear-gauge-font [size]="16"></dxo-linear-gauge-font> </dxo-linear-gauge-title> <dxo-linear-gauge-geometry orientation="vertical" ></dxo-linear-gauge-geometry> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="10" ></dxo-linear-gauge-scale> <dxo-linear-gauge-range-container backgroundColor="#CACACA" ></dxo-linear-gauge-range-container> </dx-linear-gauge> <dx-linear-gauge class="gauge-element" [value]="weatherData.pressure"> <dxo-linear-gauge-value-indicator type="circle" color="#E3A857" ></dxo-linear-gauge-value-indicator> <dxo-linear-gauge-title text="Barometric Pressure (mb)"> <dxo-linear-gauge-font [size]="16"></dxo-linear-gauge-font> </dxo-linear-gauge-title> <dxo-linear-gauge-geometry orientation="vertical" ></dxo-linear-gauge-geometry> <dxo-linear-gauge-scale [startValue]="900" [endValue]="1100" [customTicks]="[900, 1000, 1020, 1100]" > <dxo-linear-gauge-label> <dxo-linear-gauge-format type="decimal"></dxo-linear-gauge-format> </dxo-linear-gauge-label> </dxo-linear-gauge-scale> <dxo-linear-gauge-range-container backgroundColor="none"> <dxi-linear-gauge-range [startValue]="900" [endValue]="1000" color="#679EC5" ></dxi-linear-gauge-range> <dxi-linear-gauge-range [startValue]="1000" [endValue]="1020" color="#A6C567" ></dxi-linear-gauge-range> <dxi-linear-gauge-range [startValue]="1020" [endValue]="1100" color="#E18E92" ></dxi-linear-gauge-range> </dxo-linear-gauge-range-container> </dx-linear-gauge> </div> <dx-select-box [dataSource]="cities" displayExpr="name" [inputAttr]="{ 'aria-label': 'City' }" valueExpr="data" [(value)]="weatherData" > </dx-select-box>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxLinearGaugeModule, DxSelectBoxModule } from 'devextreme-angular'; import { City, 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], preserveWhitespaces: true, imports: [ DxLinearGaugeModule, DxSelectBoxModule, ], }) export class AppComponent { cities: City[]; weatherData: City['data']; constructor(service: Service) { this.cities = service.getCities(); this.weatherData = this.cities[0].data; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { width: 90%; margin: 0 auto; } ::ng-deep #gauge-demo .gauge-element { height: 400px; width: 33%; float: left; } .dx-selectbox { margin: 10px auto 0; width: 200px; } ::ng-deep #gauge-demo::after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

import { Injectable, } from '@angular/core'; export class City { name: string; id: string; data: Record<string, number>; } const cities: City[] = [{ name: 'London', id: '1', data: { temperature: 10, humidity: 81, pressure: 1002.1, }, }, { name: 'Berlin', id: '2', data: { temperature: 14, humidity: 58, pressure: 1008.5, }, }, { name: 'New York', id: '3', data: { temperature: 3, humidity: 89, pressure: 1016.2, }, }, { name: 'Moscow', id: '4', data: { temperature: 2, humidity: 51, pressure: 1016.5, }, }, { name: 'Bangkok', id: '5', data: { temperature: 37, humidity: 39, pressure: 1007.0, }, }]; @Injectable() export class Service { getCities(): City[] { return cities; } }

<!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>