Free Trial Buy
    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    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/22.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.6/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; }