Update Bar Gauge Data at Runtime

Documentation

This demo illustrates how to bind an array of values to the BarGauge. Since an array can not be bound to a field as a regular value, it is bound as a computed one.

Prev Demo Next Demo

jQuery

$(function(){ function getBasicColors(value) { var code = Number("0x" + value.slice(1)); $(".color-box").css("background-color", value); return [ (code >> 16) & 0xff, (code >> 8) & 0xff, code & 0xff ]; } var gauge = $("#gauge").dxBarGauge({ startValue: 0, endValue: 255, palette: ["#ff0000", "#00ff00", "#0000ff"], label: { visible: false }, values: getBasicColors(colors[0].code) }).dxBarGauge("instance"); $("#select-color").dxSelectBox({ width: 150, dataSource: colors, displayExpr: 'name', value: colors[0], onSelectionChanged: function(e) { gauge.option("values", getBasicColors(e.selectedItem.code)); } }); });

<!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.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/18.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 class="long-title"><h3>Colors Representation via Basic Colors</h3></div> <div id="gauge-demo"> <div id="gauge"></div> <div class="action-container"> <div id="select-color"></div> <div class="color-box"></div> </div> </div> </div> </body> </html>

#gauge-demo { height: 440px; width: 100%; } #gauge { width: 80%; height: 100%; margin-top: 20px; float: left; } .action-container { width: 20%; text-align: left; margin-top: 20px; float: left; } .color-box { width: 40px; height: 40px; margin-top: 20px; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

var colors = [{ name: 'Amaranth', code: '#e52b50' }, { name: 'Amethyst', code: '#9966cc' }, { name: 'Ash grey', code: '#b2beb5' }, { name: 'Barn red', code: '#7c0a02' }, { name: 'Imperial', code: '#602f6b' }, { name: 'Lemon lime', code: '#e3ff00' }, { name: 'Mountain Meadow', code: '#30ba8f' }, { name: 'Outer Space', code: '#414a4c' }, { name: 'Persian plum', code: '#701c1c' }, { name: 'Seal brown', code: '#321414' }, { name: 'Twilight lavender', code: '#8a496b' }, { name: 'Umber', code: '#635147' }];

Update Bar Gauge Data at Runtime

jQuery

AngularJS

Angular

ASP.NET MVC

ASP.NET Core