Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Gauges

Update Linear Gauge Data at Runtime

Documentation

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

Copy to CodeSandBox
Apply
Reset
<div class="long-title"><h3>Weather Indicators</h3></div> <div id="gauge-demo"> <dx-linear-gauge class="gauge-element" [value]="weatherData.temperature"> <dxo-title text="Temperature (°C)"> <dxo-font [size]="16"></dxo-font> </dxo-title> <dxo-geometry orientation="vertical"></dxo-geometry> <dxo-scale [startValue]="-40" [endValue]="40" [tickInterval]="40"></dxo-scale> <dxo-range-container backgroundColor="none"> <dxi-range [startValue]="-40" [endValue]="0" color="#679EC5"></dxi-range> <dxi-range [startValue]="0" [endValue]="40"></dxi-range> </dxo-range-container> </dx-linear-gauge> <dx-linear-gauge class="gauge-element" [value]="weatherData.humidity"> <dxo-value-indicator type="rhombus" color="#A4DDED"></dxo-value-indicator> <dxo-title text="Humidity (%)"> <dxo-font [size]="16"></dxo-font> </dxo-title> <dxo-geometry orientation="vertical"></dxo-geometry> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="10"></dxo-scale> <dxo-range-container backgroundColor="#CACACA"></dxo-range-container> </dx-linear-gauge> <dx-linear-gauge class="gauge-element" [value]="weatherData.pressure"> <dxo-value-indicator type="circle" color="#E3A857"></dxo-value-indicator> <dxo-title text="Barometric Pressure (mb)"> <dxo-font [size]="16"></dxo-font> </dxo-title> <dxo-geometry orientation="vertical"></dxo-geometry> <dxo-scale [startValue]="900" [endValue]="1100" [customTicks]="[900, 1000, 1020, 1100]"> <dxo-label> <dxo-format type="decimal"></dxo-format> </dxo-label> </dxo-scale> <dxo-range-container backgroundColor="none"> <dxi-range [startValue]="900" [endValue]="1000" color="#679EC5"></dxi-range> <dxi-range [startValue]="1000" [endValue]="1020" color="#A6C567"></dxi-range> <dxi-range [startValue]="1020" [endValue]="1100" color="#E18E92"></dxi-range> </dxo-range-container> </dx-linear-gauge> </div> <dx-select-box [dataSource]="cities" displayExpr="name" valueExpr="data" [(value)]="weatherData"> </dx-select-box>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 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/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], preserveWhitespaces: true }) export class AppComponent { cities: City[]; weatherData: City; constructor(service: Service) { this.cities = service.getCities(); this.weatherData = this.cities[0].data; } } @NgModule({ imports: [ BrowserModule, DxLinearGaugeModule, DxSelectBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::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: any; } let 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; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.0.3/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8', 'devextreme-angular': 'npm:devextreme-angular@20.2.4', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>