Update Linear Gauge Data at Runtime
Documentation
This demo illustrates data binding in the LinearGauge widget. The bound data changes when a user selects a new location in the City drop-down menu.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.weatherData = cities[0].data;
$scope.temperatureGauge = {
bindingOptions: {
value: "weatherData.temperature",
},
title: {
text: "Temperature (°C)",
font: {
size: 16
}
},
geometry: { orientation: "vertical" },
scale: {
startValue: -40,
endValue: 40,
tickInterval: 40
},
rangeContainer: {
backgroundColor: "none",
ranges: [
{ startValue: -40, endValue: 0, color: "#679EC5" },
{ startValue: 0, endValue: 40 }
]
}
};
$scope.humidityGauge = {
bindingOptions: {
value: "weatherData.humidity",
},
title: {
text: "Humidity (%)",
font: {
size: 16
}
},
geometry: { orientation: "vertical" },
scale: {
startValue: 0,
endValue: 100,
tickInterval: 10,
},
rangeContainer: { backgroundColor: "#CACACA" },
valueIndicator: { type: "rhombus", color: "#A4DDED" }
};
$scope.pressureGauge = {
bindingOptions: {
value: "weatherData.pressure",
},
title: {
text: "Barometric Pressure (mb)",
font: {
size: 16
}
},
geometry: { orientation: "vertical" },
scale: {
label: {
format: {
type: "decimal"
}
},
startValue: 900, endValue: 1100,
customTicks: [900, 1000, 1020, 1100]
},
rangeContainer: {
ranges: [
{ startValue: 900, endValue: 1000, color: "#679EC5" },
{ startValue: 1000, endValue: 1020, color: "#A6C567" },
{ startValue: 1020, endValue: 1100, color: "#E18E92" }
]
},
valueIndicator: { type: "circle", color: "#E3A857" }
};
$scope.selectBoxOptions = {
dataSource: cities,
displayExpr: "name",
onValueChanged: function(e) {
$scope.weatherData = e.value.data;
},
value: cities[0]
};
});
<!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.1.0/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/18.1.4/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.4/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/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/18.1.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" ng-app="DemoApp" ng-controller="DemoController">
<div class="long-title"><h3>Weather Indicators</h3></div>
<div id="gauge-demo">
<div class="gauge-element" dx-linear-gauge="temperatureGauge"></div>
<div class="gauge-element" dx-linear-gauge="humidityGauge"></div>
<div class="gauge-element" dx-linear-gauge="pressureGauge"></div>
<div dx-select-box="selectBoxOptions"></div>
</div>
</div>
</body>
</html>
#gauge-demo {
height: 480px;
width: 100%;
}
#gauge-demo .gauge-element {
height: 400px;
width: 30%;
display: inline-block;
}
#gauge-demo .dx-selectbox {
margin: 10px auto 0;
width: 200px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
var cities = [{
name: 'London',
id: '1',
data: {
temperature: 10,
humidity: 81,
pressure: 1002.1
}
}, {
name: 'Berlin',
id: '2',
data: {
temperature: 14,
humidity: 58,
pressure: 1008.5
}
}, {
name: 'New York',
id: '3',
data: {
temperature: 3,
humidity: 89,
pressure: 1016.2
}
}, {
name: 'Moscow',
id: '4',
data: {
temperature: 2,
humidity: 51,
pressure: 1016.5
}
}, {
name: 'Bangkok',
id: '5',
data: {
temperature: 37,
humidity: 39,
pressure: 1007.0
}
}];