JavaScript/jQuery Gauges - Update Linear Gauge Data at Runtime

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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { const temperatureGauge = $('#temperatureGauge').dxLinearGauge({ 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 }, ], }, value: cities[0].data.temperature, }).dxLinearGauge('instance'); const humidityGauge = $('#humidityGauge').dxLinearGauge({ title: { text: 'Humidity (%)', font: { size: 16, }, }, geometry: { orientation: 'vertical' }, scale: { startValue: 0, endValue: 100, tickInterval: 10, }, rangeContainer: { backgroundColor: '#CACACA' }, valueIndicator: { type: 'rhombus', color: '#A4DDED' }, value: cities[0].data.humidity, }).dxLinearGauge('instance'); const pressureGauge = $('#pressureGauge').dxLinearGauge({ 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' }, value: cities[0].data.pressure, }).dxLinearGauge('instance'); $('#selectbox').dxSelectBox({ dataSource: cities, inputAttr: { 'aria-label': 'City' }, onSelectionChanged(e) { const weatherData = e.selectedItem.data; temperatureGauge.option('value', weatherData.temperature); humidityGauge.option('value', weatherData.humidity); pressureGauge.option('value', weatherData.pressure); }, displayExpr: 'name', value: cities[0], }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.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/24.1.6/css/dx.light.css" /> <script src="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"> <div class="long-title"><h3>Weather Indicators</h3></div> <div id="gauge-demo"> <div class="gauge-element" id="temperatureGauge"></div> <div class="gauge-element" id="humidityGauge"></div> <div class="gauge-element" id="pressureGauge"></div> </div> <div id="selectbox"></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, }, }];