ASP .NET MVC Gauge Tag Helper

The jqx-gauge tag helper adds a Gauge component to a web page.

@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Gauge Example";
    List<GaugeRange> ranges = new List<GaugeRange>()
    {
        new GaugeRange() {StartValue = 0, EndValue = 55, StartWidth = 1, EndWidth = 5, Style = new GaugeStyle() {Fill = "#4bb648", Stroke = "#4bb648" }},
        new GaugeRange() {StartValue = 55, EndValue = 110, StartWidth = 5, EndWidth = 10, Style = new GaugeStyle() {Fill = "#fbd109", Stroke = "#fbd109" }},
        new GaugeRange() {StartValue = 110, EndValue = 165, StartWidth = 10, EndWidth = 13, Style = new GaugeStyle() {Fill = "#ff8000", Stroke = "#ff8000"} },
        new GaugeRange() {StartValue = 165, EndValue = 220, StartWidth = 13, EndWidth = 16, Style = new GaugeStyle() {Fill = "#e02629", Stroke = "#e02629" } }
    };
    GaugeTicks ticksMinor = new GaugeTicks() { Interval = 5, Size = "5%" };
    GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = "9%" };
}
<label>ASP .NET Core MVC Gauge Tag Helper Example</label><br/><br/>
<jqx-gauge ranges="ranges" ticksMinor="ticksMinor" ticksMajor="ticksMajor" value="50" colorScheme="scheme05" animationDuration="1200"></jqx-gauge>

ASP .NET MVC Linear Gauge Tag Helper

The jqx-lineargauge tag helper adds a Linear Gauge component to a web page.

@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Linear Gauge Example";
    GaugeLabels labels = new GaugeLabels() { Interval = 20, FormatValue = "formatValue()" };
        List<GaugeRange> ranges = new List<GaugeRange>()
        {
            new GaugeRange() {StartValue = -10, EndValue = 10, Style = new GaugeStyle() {Fill = "#4bb648", Stroke = "#4bb648" }},
            new GaugeRange() {StartValue = 10, EndValue = 35, Style = new GaugeStyle() {Fill = "#fbd109", Stroke = "#fbd109" }},
            new GaugeRange() {StartValue = 35, EndValue = 60, Style = new GaugeStyle() {Fill = "#ff8000", Stroke = "#ff8000"}}
        };
    GaugeTicks ticksMinor = new GaugeTicks() { Interval = 2.5, Size = "5%", Style = new GaugeStyle() { StrokeWidth = 1, Stroke = "#aaaaaa" } };
    GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = "10%" };
    GaugePointer pointer = new GaugePointer() { Size = "5%" };
}
<script>
    function formatValue(value, position) {
        if (position === 'far') {
            value = (9 / 5) * value + 32;
            if (value === -76) {
                return 'F';
            }
            return value + '';
        }
        if (value === -60) {
            return 'C';
        }
        return value + '';
    }
</script>
<label>ASP .NET Core MVC Linear Gauge Tag Helper Example</label><br/><br/>
<jqx-lineargauge width="100" max="60" orientation="Orientation.Vertical" height="350" pointer="pointer" ranges="ranges" labels="labels" ticksMinor="ticksMinor" ticksMajor="ticksMajor" value="50" colorScheme="scheme05" animationDuration="1200"></jqx-lineargauge>