Your search did not match any results.
Gauges

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.
@model List<DevExtreme.NETCore.Demos.Models.Color> <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 string[] { "#ff0000", "#00ff00", "#0000ff" }) .Label(l => l.Visible(false)) .Values(new JS(String.Format(@"getBasicColors(""{0}"")", Model[0].Code))) ) <div class="action-container"> @(Html.DevExtreme().SelectBox() .ID("select-color") .Width(150) .DataSource(Model) .DisplayExpr("Name") .ValueExpr("Name") .Value(Model[0].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 List<Color> { 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-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }