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
import React from 'react'; import { LinearGauge, Title, Font, Geometry, Scale, RangeContainer, Range, ValueIndicator, Label } from 'devextreme-react/linear-gauge'; import { SelectBox } from 'devextreme-react/select-box'; import { cities } from './data.js'; const customTicks = [900, 1000, 1020, 1100]; const pressureLabelFormat = { type: 'decimal' }; class App extends React.Component { constructor(props) { super(props); this.state = { selectBoxValue: cities[0].data, temperature: cities[0].data.temperature, humidity: cities[0].data.humidity, pressure: cities[0].data.pressure }; this.onSelectionChanged = (e) => { var weatherData = e.selectedItem.data; this.setState({ selectBoxValue: weatherData, temperature: weatherData.temperature, humidity: weatherData.humidity, pressure: weatherData.pressure }); }; } render() { const temperatureGaugeStartValue = -40; return ( <div> <div className="long-title"> <h3>Weather Indicators</h3> </div> <div id="gauge-demo"> <LinearGauge className="gauge-element" value={this.state.temperature} > <Title text="Temperature (°C)"> <Font size={16} /> </Title> <Geometry orientation="vertical" /> <Scale startValue={temperatureGaugeStartValue} endValue={40} tickInterval={40} /> <RangeContainer backgroundColor="none"> <Range startValue={temperatureGaugeStartValue} endValue={0} color="#679EC5" /> <Range startValue={0} endValue={40} /> </RangeContainer> </LinearGauge> <LinearGauge className="gauge-element" value={this.state.humidity} > <Title text="Humidity (%)"> <Font size={16} /> </Title> <Geometry orientation="vertical" /> <Scale startValue={0} endValue={100} tickInterval={10} /> <RangeContainer backgroundColor="#CACACA" /> <ValueIndicator type="rhombus" color="#A4DDED" /> </LinearGauge> <LinearGauge className="gauge-element" value={this.state.pressure} > <Title text="Barometric Pressure (mb)"> <Font size={16} /> </Title> <Geometry orientation="vertical" /> <Scale startValue={900} endValue={1100} customTicks={customTicks}> <Label format={pressureLabelFormat} /> </Scale> <RangeContainer> <Range startValue={900} endValue={1000} color="#679EC5" /> <Range startValue={1000} endValue={1020} color="#A6C567" /> <Range startValue={1020} endValue={1100} color="#E18E92" /> </RangeContainer> <ValueIndicator type="circle" color="#E3A857" /> </LinearGauge> </div> <SelectBox dataSource={cities} valueExpr="data" value={this.state.selectBoxValue} displayExpr="name" onSelectionChanged={this.onSelectionChanged} /> </div> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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" /> <link rel="stylesheet" type ="text/css" href="styles.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>
#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; }
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: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.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-react': 'npm:devextreme-react@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', // SystemJS plugins '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': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });