ASP .NET Core MVC Demos
Show Demo List
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>
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>
jQWidgets © 2011-2025. All Rights Reserved.