Overview
DevExtreme JavaScript Gauges is a collection of adaptive gauge controls available as AngularJS directives. They come in two geometric shapes: circular, or radial, and linear. Behaving like native components, gauges support two-way binding to scope properties and declarative configuration. View demos in this section to discover gauges' key features.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
const color = '#f05b41';
$scope.speedValue = 40;
$scope.gaugeValue = 20;
$scope.linearGaugeValue = 42.8;
$scope.$watch('speedValue', (speedValue) => {
$scope.gaugeValue = speedValue / 2;
});
$scope.$watch('speedValue', (speedValue) => {
$scope.linearGaugeValue = 50 - speedValue * 0.24;
});
$scope.options = {
speed: {
geometry: {
startAngle: 225,
endAngle: 315,
},
scale: {
startValue: 20,
endValue: 200,
tickInterval: 20,
minorTickInterval: 10,
},
valueIndicator: {
indentFromCenter: 55,
color,
spindleSize: 0,
spindleGapSize: 0,
},
centerTemplate(gauge, container) {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 55);
circle.setAttribute('stroke-width', 2);
circle.setAttribute('stroke', color);
circle.setAttribute('fill', 'transparent');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('alignment-baseline', 'middle');
text.setAttribute('x', 100);
text.setAttribute('y', 100);
text.setAttribute('font-size', 50);
text.setAttribute('font-weight', 'lighter');
text.setAttribute('fill', color);
text.textContent = gauge.value();
container.appendChild(circle);
container.appendChild(text);
},
bindingOptions: {
value: 'speedValue',
},
size: {
width: 260,
},
},
coolant: {
geometry: {
startAngle: 180,
endAngle: 90,
},
scale: {
startValue: 0,
endValue: 100,
tickInterval: 50,
},
valueIndicator: {
color,
},
bindingOptions: {
value: 'gaugeValue',
},
size: {
width: 90,
height: 90,
},
},
psi: {
scale: {
startValue: 100,
endValue: 0,
tickInterval: 50,
},
geometry: {
startAngle: 90,
endAngle: 0,
},
valueIndicator: {
color,
},
bindingOptions: {
value: 'gaugeValue',
},
size: {
width: 90,
height: 90,
},
},
rpm: {
scale: {
startValue: 100,
endValue: 0,
tickInterval: 50,
},
geometry: {
startAngle: -90,
endAngle: -180,
},
valueIndicator: {
color,
},
bindingOptions: {
value: 'gaugeValue',
},
size: {
width: 90,
height: 90,
},
},
instantFuel: {
scale: {
startValue: 0,
endValue: 100,
tickInterval: 50,
},
geometry: {
startAngle: 0,
endAngle: -90,
},
valueIndicator: {
color,
},
bindingOptions: {
value: 'gaugeValue',
},
size: {
width: 90,
height: 90,
},
},
fuel: {
scale: {
startValue: 0,
endValue: 50,
tickInterval: 25,
minorTickInterval: 12.5,
minorTick: {
visible: true,
},
label: {
visible: false,
},
},
valueIndicator: {
color,
size: 8,
offset: 7,
},
bindingOptions: {
value: 'linearGaugeValue',
},
size: {
width: 90,
height: 20,
},
},
slider: {
min: 0,
max: 200,
bindingOptions: {
value: 'speedValue',
},
width: 155,
},
};
});
<!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/23.1.5/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/23.1.5/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="gauge-demo">
<div id="gauge-container">
<div class="left-section">
<div dx-circular-gauge="options.coolant"></div>
<div dx-circular-gauge="options.rpm"></div>
</div>
<div class="center-section">
<div id="speed-gauge" dx-circular-gauge="options.speed"></div>
<div id="fuel-gauge" dx-linear-gauge="options.fuel"></div>
</div>
<div class="right-section">
<div dx-circular-gauge="options.psi"></div>
<div dx-circular-gauge="options.instantFuel"></div>
</div>
</div>
<div id="slider" dx-slider="options.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;
}
#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;
}