Data Visualization ▸ Linear Gauge

@model IEnumerable<DevExtreme.MVC.Demos.Models.City>

@{ var firstCity = Model.First(); }

<div class="long-title"><h3>Weather Indicators</h3></div>
<div id="gauge-demo">
    @(Html.DevExtreme().LinearGauge()
        .ID("temperatureGauge")
        .ElementAttr("class", "gauge-element")
        .Title(t => t
            .Text("Temperature (°C)")
            .Font(f => f.Size(16))
        )
        .Geometry(g => g.Orientation(Orientation.Vertical))
        .Scale(s => s
            .StartValue(-40)
            .EndValue(40)
            .TickInterval(40)
        )
        .RangeContainer(rc => rc
            .BackgroundColor("none")
            .Ranges(r => {
                r.Add().StartValue(-40).EndValue(0).Color("#679EC5");
                r.Add().StartValue(0).EndValue(40);
            })
        )
        .Value(firstCity.Data.Temperature)
    )
    @(Html.DevExtreme().LinearGauge()
        .ID("humidityGauge")
        .ElementAttr("class", "gauge-element")
        .Title(t => t
            .Text("Humidity (%)")
            .Font(f => f.Size(16))
        )
        .Geometry(g => g.Orientation(Orientation.Vertical))
        .Scale(s => s
            .StartValue(0)
            .EndValue(100)
            .TickInterval(10)
        )
        .RangeContainer(rc => rc.BackgroundColor("#CACACA"))
        .ValueIndicator(vi => vi
            .Type(GaugeIndicatorType.Rhombus)
            .Color("#A4DDED")
        )
        .Value(firstCity.Data.Humidity)
    )
    @(Html.DevExtreme().LinearGauge()
        .ID("pressureGauge")
        .ElementAttr("class", "gauge-element")
        .Title(t => t
            .Text("Barometric Pressure (mb)")
            .Font(f => f.Size(16))
        )
        .Geometry(g => g.Orientation(Orientation.Vertical))
        .Scale(s => s
            .StartValue(900)
            .EndValue(1100)
            .CustomTicks(new double[] { 900, 1000, 1020, 1100 })
            .Label(l=>l.Format("decimal"))
        )
        .RangeContainer(rc => rc
            .Ranges(r => {
                r.Add().StartValue(900).EndValue(1000).Color("#679EC5");
                r.Add().StartValue(1000).EndValue(1020).Color("#A6C567");
                r.Add().StartValue(1020).EndValue(1100).Color("#E18E92");
            })
        )
        .ValueIndicator(vi => vi
            .Type(GaugeIndicatorType.Circle)
            .Color("#E3A857")
        )
        .Value(firstCity.Data.Pressure)
    )
</div>
@(Html.DevExtreme().SelectBox()
    .ID("selectbox")
    .DataSource(Model)
    .InputAttr("aria-label", "City")
    .DisplayExpr("Name")
    .ValueExpr("ID")
    .Value(firstCity.ID)
    .OnSelectionChanged(@<text>
        function(e) {
            var weatherData = e.selectedItem.Data,
                temperatureGauge = $("#temperatureGauge").dxLinearGauge("instance"),
                humidityGauge = $("#humidityGauge").dxLinearGauge("instance"),
                pressureGauge = $("#pressureGauge").dxLinearGauge("instance");

            temperatureGauge.option("value", weatherData.Temperature);
            humidityGauge.option("value", weatherData.Humidity);
            pressureGauge.option("value", weatherData.Pressure);
        }
    </text>)
)

using DevExtreme.MVC.Demos.Models.SampleData;
using System.Collections.Generic;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class GaugesController : Controller {

        public ActionResult LinearGauge() {
            return View(SampleData.GaugeCitiesData);
        }

    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DevExtreme.MVC.Demos.Models {
    public class City {
        public string Name { get; set; }
        public int ID { get; set; }
        public ClimateData Data { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DevExtreme.MVC.Demos.Models {
    public class ClimateData {
        public int Temperature { get; set; }
        public int Humidity { get; set; }
        public double Pressure { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<City> GaugeCitiesData = new[] {
            new City {
                Name = "London",
                ID = 1,
                Data = new ClimateData {
                    Temperature = 10,
                    Humidity = 81,
                    Pressure = 1002.1
                }
            },
            new City {
                Name = "Berlin",
                ID = 2,
                Data = new ClimateData {
                    Temperature = 14,
                    Humidity = 58,
                    Pressure = 1008.5
                }
            },
            new City {
                Name = "New York",
                ID = 3,
                Data = new ClimateData {
                    Temperature = 3,
                    Humidity = 89,
                    Pressure = 1016.2
                }
            },
            new City {
                Name = "Moscow",
                ID = 4,
                Data = new ClimateData {
                    Temperature = 2,
                    Humidity = 51,
                    Pressure = 1016.5
                }
            },
            new City {
                Name = "Bangkok",
                ID = 5,
                Data = new ClimateData {
                    Temperature = 37,
                    Humidity = 39,
                    Pressure = 1007.0
                }
            }
        };
    }
}

#gauge-demo {
    width: 90%;
    margin: 0 auto
}

#gauge-demo .gauge-element {
    height: 400px;
    width: 33%;
    float: left;
}

.dx-selectbox {
    margin: 10px auto 0;
    width: 200px;
}

#gauge-demo::after{
    content: ".";
  	display: block;
  	clear: both;
  	visibility: hidden;
  	line-height: 0;
  	height: 0;
}

.long-title h3 {
    font-weight: 200;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}