Your search did not match any results.

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.

Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.Color> @{ var firstColor = Model.First(); } <div class="long-title"><h3>Colors Representation via Basic Colors</h3></div> <div id="gauge-demo"> @(Html.DevExtreme().BarGauge() .ID("gauge") .StartValue(0) .EndValue(255) .Palette(new[] { "#ff0000", "#00ff00", "#0000ff" }) .Label(l => l.Visible(false)) .Values(new JS(String.Format(@"getBasicColors(""{0}"")", firstColor.Code))) ) <div class="action-container"> @(Html.DevExtreme().SelectBox() .ID("select-color") .Width(150) .InputAttr("aria-label", "Color") .DataSource(Model) .DisplayExpr("Name") .ValueExpr("Name") .Value(firstColor.Name) .OnSelectionChanged(@<text> function(e) { var gauge = $("#gauge").dxBarGauge("instance"); gauge.option("values", getBasicColors(e.selectedItem.Code)); } </text>) ) <div class="color-box"></div> </div> </div> <script> 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 ]; } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class GaugesController : Controller { public ActionResult UpdateBarGaugeDataAtRuntime() { return View(SampleData.Colors); } } }
using System; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Color { public string Name { get; set; } public string Code { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Color> Colors = new[] { new Color { Name = "Amaranth", Code = "#e52b50" }, new Color { Name = "Amethyst", Code = "#9966cc" }, new Color { Name = "Ash grey", Code = "#b2beb5" }, new Color { Name = "Barn red", Code = "#7c0a02" }, new Color { Name = "Imperial", Code = "#602f6b" }, new Color { Name = "Lemon lime", Code = "#e3ff00" }, new Color { Name = "Mountain Meadow", Code = "#30ba8f" }, new Color { Name = "Outer Space", Code = "#414a4c" }, new Color { Name = "Persian plum", Code = "#701c1c" }, new Color { Name = "Seal brown", Code = "#321414" }, new Color { Name = "Twilight lavender", Code = "#8a496b" }, new Color { Name = "Umber", Code = "#635147" } }; } }
#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; }