Your search did not match any results.
Gauges

Overview

DevExtreme HTML5 JavaScript Gauge controls are animated Vue components designed for use in dashboards. The gauges can be of two geometric shapes: circular, or radial, and linear. You can use Vue syntax and techniques to instantiate and configure the gauges or handle their events. In addition, the components support prop validation. Find out more about DevExtreme Vue components on GitHub.

Copy to CodeSandBox
Apply
Reset
<template> <div id="gauge-demo"> <div id="gauge-container"> <div class="left-section"> <gauge-indicator :value="speedValue / 2" :inverted="false" :start-angle="180" :end-angle="90" /> <gauge-indicator :value="speedValue / 2" :inverted="true" :start-angle="-90" :end-angle="-180" /> </div> <div class="center-section"> <dx-circular-gauge :value="speedValue"> <dx-size :width="260"/> <dx-value-indicator :second-fraction="0.24" type="twoColorNeedle" color="none" second-color="#f05b41" /> <dx-geometry :start-angle="225" :end-angle="315" /> <dx-scale :start-value="20" :end-value="200" :tick-interval="20" :minor-tick-interval="10" /> </dx-circular-gauge> <div class="speed-value"> <span>{{ speedValue }}</span> </div> <dx-linear-gauge id="fuel-gauge" :value="50 - speedValue * 0.24" > <dx-linear-size :width="90" :height="20" /> <dx-linear-scale :start-value="0" :end-value="50" :tick-interval="25" :minor-tick-interval="12.5" > <dx-minor-tick :visible="true"/> <dx-label :visible="false"/> </dx-linear-scale> <dx-linear-value-indicator :size="8" :offset="7" color="#f05b41" /> </dx-linear-gauge> </div> <div class="right-section"> <gauge-indicator :value="speedValue / 2" :inverted="true" :start-angle="90" :end-angle="0" /> <gauge-indicator :value="speedValue / 2" :inverted="false" :start-angle="0" :end-angle="-90" /> </div> </div> <dx-slider id="slider" v-model="speedValue" :width="155" :min="0" :max="200" /> </div> </template> <script> import DxSlider from 'devextreme-vue/slider'; import DxCircularGauge, { DxSize, DxValueIndicator, DxGeometry, DxScale } from 'devextreme-vue/circular-gauge'; import DxLinearGauge, { DxSize as DxLinearSize, DxValueIndicator as DxLinearValueIndicator, DxScale as DxLinearScale, DxMinorTick, DxLabel } from 'devextreme-vue/linear-gauge'; import GaugeIndicator from './GaugeIndicator.vue'; export default { components: { DxSlider, DxCircularGauge, DxSize, DxValueIndicator, DxGeometry, DxScale, DxLinearGauge, DxLinearSize, DxLinearValueIndicator, DxLinearScale, DxMinorTick, DxLabel, GaugeIndicator }, data: function() { return { speedValue: 40 }; } }; </script> <style src="./styles.css"></style>
<template> <dx-circular-gauge :value="value"> <dx-size :width="90" :height="90" /> <dx-value-indicator color="#f05b41"/> <dx-geometry :start-angle="startAngle" :end-angle="endAngle" /> <dx-scale :start-value="!inverted ? 0 : 100" :end-value="!inverted ? 100 : 0" :tick-interval="50" /> </dx-circular-gauge> </template> <script> import DxCircularGauge, { DxSize, DxValueIndicator, DxGeometry, DxScale } from 'devextreme-vue/circular-gauge'; export default { components: { DxCircularGauge, DxSize, DxValueIndicator, DxGeometry, DxScale }, props: { value: { type: Number, default: 0 }, startAngle: { type: Number, default: 0 }, endAngle: { type: Number, default: 90 }, inverted: { type: Boolean, default: true } } }; </script>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
#gauge-demo { height: 500px; } #gauge-container { text-align: center; margin: 20px auto; background-image: url('../../../../images/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; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });