Your search did not match any results.
Gauges

Overview

DevExtreme JavaScript Gauge controls are interactive jQuery components for visualizing data on dashboards. They come in two geometric shapes: circular, or radial, and linear. Circular gauges, in turn, can be of two sub-types: regular gauges and bar gauges. In this demo, you can see a simple dashboard with several highly customized gauges. Check out other demos in this section to explore gauge features, like geometry customization, palettes, tooltips, etc.

Backend API
Copy to CodePen
Apply
Reset
$(() => { const gaugeOptions = { scale: { startValue: 0, endValue: 100, tickInterval: 50, }, valueIndicator: { color: '#f05b41', }, value: 20, size: { width: 90, height: 90, }, }; const speedGauge = $('#speed-gauge').dxCircularGauge({ geometry: { startAngle: 225, endAngle: 315, }, scale: { startValue: 20, endValue: 200, tickInterval: 20, minorTickInterval: 10, }, valueIndicator: { type: 'twoColorNeedle', color: 'none', secondFraction: 0.24, secondColor: '#f05b41', }, value: 40, size: { width: 260, }, }).dxCircularGauge('instance'); $('#coolant-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, { geometry: { startAngle: 180, endAngle: 90 }, })); $('#psi-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, { scale: { startValue: 100, endValue: 0 }, geometry: { startAngle: 90, endAngle: 0 }, })); $('#rpm-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, { scale: { startValue: 100, endValue: 0 }, geometry: { startAngle: -90, endAngle: -180 }, })); $('#instant-fuel-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, { geometry: { startAngle: 0, endAngle: -90 }, })); const fuelGauge = $('#fuel-gauge').dxLinearGauge({ scale: { startValue: 0, endValue: 50, tickInterval: 25, minorTickInterval: 12.5, minorTick: { visible: true, }, label: { visible: false, }, }, valueIndicator: { color: '#f05b41', size: 8, offset: 7, }, value: 40.4, size: { width: 90, height: 20, }, }).dxLinearGauge('instance'); $('#slider').dxSlider({ min: 0, max: 200, value: 40, width: 155, onValueChanged(e) { const gauges = ['coolant', 'psi', 'rpm', 'instant-fuel']; $('.speed-value > span').text(e.value); speedGauge.value(e.value); gauges.forEach((gaugeName) => { $(`#${gaugeName}-gauge`).dxCircularGauge('instance').value(e.value / 2); }); fuelGauge.value(50 - e.value * 0.24); }, }); });
<!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://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.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 id="gauge-demo"> <div id="gauge-container"> <div class="left-section"> <div id="coolant-gauge"></div> <div id="rpm-gauge"></div> </div> <div class="center-section"> <div id="speed-gauge"></div> <div class="speed-value"> <span>40</span> </div> <div id="fuel-gauge"></div> </div> <div class="right-section"> <div id="psi-gauge"></div> <div id="instant-fuel-gauge"></div> </div> </div> <div id="slider"></div> </div> </div> </body> </html>
#gauge-demo { height: 500px; } #gauge-container { text-align: center; margin: 20px auto; background-image: url('../../../../images/Gauges/mask.png'); background-repeat: no-repeat; width: 786px; height: 500px; } #gauge-container > div { display: inline-block; position: relative; } .left-section { top: -20px; left: -40px; } .center-section { top: 25px; } .right-section { top: -20px; right: -40px; } .speed-value { position: absolute; border: 2px solid #f05b41; border-radius: 50%; width: 110px; height: 110px; left: 28%; top: 36%; line-height: 100px; } .speed-value > span { font-size: 50px; font-weight: lighter; color: #f05b41; } #fuel-gauge { position: absolute; left: 34%; bottom: 5%; } #slider { position: relative; top: -105px; margin: 0 auto; } #slider .dx-slider-bar { background-color: #fff; } #slider .dx-slider-handle { background-color: #f05b41; width: 16px; height: 16px; margin-top: -8px; margin-right: -8px; border-radius: 50%; border: none; } #slider .dx-slider-handle .dx-inkripple-wave { background: none; } #slider .dx-slider-handle::after { background-color: #f05b41; } #slider .dx-slider-range.dx-slider-range-visible { border-color: #f05b41; background-color: #f05b41; }