Your search did not match any results.
Linear Gauge

Different Value Indicator Types

Documentation

This demo illustrates all the available value indicator types for the LinearGauge.

Copy to Plunker
Apply
Reset
<div class="long-title"> <h3>Available Disk Space</h3> </div> <div id="gauge-demo"> <dx-linear-gauge id="c1" [value]="75"> <dxo-value-indicator type="rectangle" color="#9B870C"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c2" [value]="80"> <dxo-value-indicator type="rhombus" color="#779ECB"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c3" [value]="65"> <dxo-value-indicator type="circle" color="#8FBC8F"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c4" [value]="90"> <dxo-value-indicator type="rangebar" color="#483D8B"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c5" [value]="70"> <dxo-value-indicator type="textCloud" color="#734F96"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c6" [value]="85"> <dxo-value-indicator type="triangleMarker" color="#f05b41"> </dxo-value-indicator> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxLinearGaugeModule } from 'devextreme-angular' if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { customizeText(arg: any) { return arg.valueText + " %"; } } @NgModule({ imports: [ BrowserModule, DxLinearGaugeModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #gauge-demo { width: 100%; } /deep/ #c1, #c2, #c3, #c4, #c5, #c6 { height: 110px; } /deep/ #c5 { width: 107%; margin-left: -40px; } /deep/ .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
// 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://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@17.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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/17.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.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.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/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>