Your search did not match any results.
Gauges

Variable Number of Subvalue Indicators

API Reference
This demo illustrates the capability of dxLinearGauge to change the number of subvalue indicators at runtime. It is performed by calling the subvalues method of a gauge instance with a new array of subvalues passed as its parameter.
Copy to Codepen
Apply
Reset
$(function(){ var gauge = $("#gauge").dxLinearGauge({ scale: { startValue: 0, endValue: 10, tickInterval: 2, label: { customizeText: function (arg) { return arg.valueText + " kW"; } } }, tooltip: { enabled: true, customizeTooltip: function (arg) { var result = arg.valueText + " kW"; if (arg.index >= 0) { result = "Secondary " + (arg.index + 1) + ": " + result; } else { result = "Primary: " + result; } return { text: result }; } }, "export": { enabled: true }, title: { text: "Power of Air Conditioners in Store Departments (kW)", font: { size: 28 } }, value: dataSource[0].primary, subvalues: dataSource[0].secondary }).dxLinearGauge("instance"); $("#selectbox").dxSelectBox({ dataSource: dataSource, displayExpr: "name", onValueChanged: function(data) { gauge.value(data.value.primary); gauge.subvalues(data.value.secondary); }, value: dataSource[0], width: 200 }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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 id="gauge-demo"> <div id="gauge"></div> <div id="selectbox"></div> </div> </div> </body> </html>
#gauge-demo { height: 440px; width: 100%; } #gauge { height: 400px; }
var dataSource = [{ name: 'Meat', primary: 8, secondary: [7, 3] }, { name: 'Fish', primary: 7, secondary: [7, 5, 1] }, { name: 'Grocery', primary: 5, secondary: [1, 3] }, { name: 'Greengrocery', primary: 3, secondary: [1] }, { name: 'Stationery', primary: 2, secondary: [] }];