Gauges - Bar Gauge

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 BarGauge() { 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; }