Your search did not match any results.
Gauges

Update Linear Gauge Data at Runtime

Documentation

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

Backend API
Copy to CodePen
Apply
Reset
const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.weatherData = cities[0].data; $scope.temperatureGauge = { bindingOptions: { value: 'weatherData.temperature', }, title: { text: 'Temperature (°C)', font: { size: 16, }, }, geometry: { orientation: 'vertical' }, scale: { startValue: -40, endValue: 40, tickInterval: 40, }, rangeContainer: { backgroundColor: 'none', ranges: [ { startValue: -40, endValue: 0, color: '#679EC5' }, { startValue: 0, endValue: 40 }, ], }, }; $scope.humidityGauge = { bindingOptions: { value: 'weatherData.humidity', }, title: { text: 'Humidity (%)', font: { size: 16, }, }, geometry: { orientation: 'vertical' }, scale: { startValue: 0, endValue: 100, tickInterval: 10, }, rangeContainer: { backgroundColor: '#CACACA' }, valueIndicator: { type: 'rhombus', color: '#A4DDED' }, }; $scope.pressureGauge = { bindingOptions: { value: 'weatherData.pressure', }, title: { text: 'Barometric Pressure (mb)', font: { size: 16, }, }, geometry: { orientation: 'vertical' }, scale: { label: { format: { type: 'decimal', }, }, startValue: 900, endValue: 1100, customTicks: [900, 1000, 1020, 1100], }, rangeContainer: { ranges: [ { startValue: 900, endValue: 1000, color: '#679EC5' }, { startValue: 1000, endValue: 1020, color: '#A6C567' }, { startValue: 1020, endValue: 1100, color: '#E18E92' }, ], }, valueIndicator: { type: 'circle', color: '#E3A857' }, }; $scope.selectBoxOptions = { dataSource: cities, displayExpr: 'name', onValueChanged(e) { $scope.weatherData = e.value.data; }, value: cities[0], }; });
<!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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="long-title"><h3>Weather Indicators</h3></div> <div id="gauge-demo"> <div class="gauge-element" dx-linear-gauge="temperatureGauge"></div> <div class="gauge-element" dx-linear-gauge="humidityGauge"></div> <div class="gauge-element" dx-linear-gauge="pressureGauge"></div> </div> <div dx-select-box="selectBoxOptions"></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; }
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, }, }];