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
<template> <div> <div class="long-title"> <h3>Weather Indicators</h3> </div> <div id="gauge-demo"> <DxLinearGauge id="temperatureGauge" :value="value.data.temperature" class="gauge-element" > <DxTitle text="Temperature (°C)" > <DxFont :size="16" /> </DxTitle> <DxGeometry orientation="vertical" /> <DxScale :start-value="-40" :end-value="40" :tick-interval="40" /> <DxRangeContainer background-color="none" > <DxRange :start-value="-40" :end-value="0" color="#679EC5" /> <DxRange :start-value="0" :end-value="40" /> </DxRangeContainer> </DxLinearGauge> <DxLinearGauge id="humidityGauge" :value="value.data.humidity" class="gauge-element" > <DxTitle text="Humidity (%)" > <DxFont :size="16" /> </DxTitle> <DxGeometry orientation="vertical" /> <DxScale :start-value="0" :end-value="100" :tick-interval="10" /> <DxRangeContainer background-color="#CACACA" /> <DxValueIndicator type="rhombus" color="#A4DDED" /> </DxLinearGauge> <DxLinearGauge id="pressureGauge" :value="value.data.pressure" class="gauge-element" > <DxTitle text="Barometric Pressure (mb)" > <DxFont :size="16" /> </DxTitle> <DxGeometry orientation="vertical" /> <DxScale :start-value="900" :end-value="1100" :custom-ticks="customTicks" > <DxLabel :format="pressureLabelFormat" /> </DxScale> <DxRangeContainer> <DxRange :start-value="900" :end-value="1000" color="#679EC5" /> <DxRange :start-value="1000" :end-value="1020" color="#A6C567" /> <DxRange :start-value="1020" :end-value="1100" color="#E18E92" /> </DxRangeContainer> <DxValueIndicator type="circle" color="#E3A857" /> </DxLinearGauge> </div> <DxSelectBox id="selectbox" :data-source="cities" v-model:value="value" display-expr="name" /> </div> </template> <script> import { cities } from './data.js'; import { DxLinearGauge, DxTitle, DxFont, DxGeometry, DxScale, DxRangeContainer, DxRange, DxValueIndicator, DxLabel } from 'devextreme-vue/linear-gauge'; import { DxSelectBox } from 'devextreme-vue/select-box'; export default { components: { DxLinearGauge, DxTitle, DxFont, DxGeometry, DxScale, DxRangeContainer, DxRange, DxValueIndicator, DxLabel, DxSelectBox }, data() { return { cities: cities, value: cities[0], customTicks: [900, 1000, 1020, 1100], pressureLabelFormat: { type: 'decimal' } }; } }; </script> <style scoped> #gauge-demo { width: 90%; margin: 0 auto } #gauge-demo .gauge-element { height: 400px; width: 33%; float: left; } .dx-selectbox { margin: 10px auto 0; width: 200px; } #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; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <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="dx-theme" data-theme="generic.light" 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/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const cities = [{ 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 } }];
System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', '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', 'devextreme-vue': 'npm:devextreme-vue@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/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });