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/19.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.7/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', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });