|
animationDuration
|
int
|
400
|
Sets or gets the animationDuration property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge animation-duration="400"></jqx-gauge>
|
|
border
|
string
|
{ size: '10%', style: { stroke: '#cccccc'}, visible: true, showGradient: true }
|
Sets or gets the border property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge border="border"></jqx-gauge>
|
|
caption
|
string
|
{ value: '', position: 'bottom', offset: [0, 0], visible: true }
|
Sets or gets the caption property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge caption="caption"></jqx-gauge>
|
|
cap
|
string
|
{ size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' } , visible: true }
|
Sets or gets the cap property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge cap="cap"></jqx-gauge>
|
|
colorScheme
|
string
|
'scheme01'
|
Sets or gets the colorScheme property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge color-scheme="scheme01"></jqx-gauge>
|
|
disabled
|
bool
|
false
|
Sets or gets the disabled property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge disabled="true"></jqx-gauge>
|
|
easing
|
string
|
linear
|
Sets or gets the easing property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge easing="linear"></jqx-gauge>
|
|
endAngle
|
int
|
270
|
Sets or gets the endAngle property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge end-angle="250"></jqx-gauge>
|
|
height
|
int
|
350
|
Sets or gets the height property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge height="400"></jqx-gauge>
|
|
int64
|
bool
|
false
|
Sets or gets the int64 property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge int64="true"></jqx-gauge>
|
|
labels
|
string
|
{ distance: '38%', position: 'none', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) { return value; }}
|
Sets or gets the labels property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge labels="labels"></jqx-gauge>
|
|
min
|
int
|
0
|
Sets or gets the min property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge min="10"></jqx-gauge>
|
|
max
|
int
|
220
|
Sets or gets the max property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge max="210"></jqx-gauge>
|
|
pointer
|
string
|
{ pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }
|
Sets or gets the pointer property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge pointer="pointer"></jqx-gauge>
|
|
radius
|
int
|
'50%'
|
Sets or gets the radius property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge radius="150"></jqx-gauge>
|
|
ranges
|
List<string>
|
[]
|
Sets or gets the ranges property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge ranges="ranges"></jqx-gauge>
|
|
startAngle
|
int
|
30
|
Sets or gets the startAngle property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge start-angle="40" end-angle="200"></jqx-gauge>
|
|
showRanges
|
bool
|
true
|
Sets or gets the showRanges property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge show-ranges="true"></jqx-gauge>
|
|
style
|
string
|
{ fill: '#ffffff', stroke: '#ffffff' }
|
Sets or gets the style property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge style="style"></jqx-gauge>
|
|
ticksMajor
|
string
|
{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
|
Sets or gets the ticksMajor property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge ticks-major="ticksMajor"></jqx-gauge>
|
|
ticksMinor
|
string
|
{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
|
Sets or gets the ticksMinor property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge ticks-minor="ticksMinor"></jqx-gauge>
|
|
ticksDistance
|
int
|
'20%"
|
Sets or gets the ticksDistance property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge ticks-distance="50%"></jqx-gauge>
|
|
value
|
int
|
0
|
Sets or gets the value property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge value="100"></jqx-gauge>
|
|
width
|
int
|
350
|
Sets or gets the width property.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge width="300"></jqx-gauge>
|
|
|
|
valueChanging
|
Event
|
|
Code examples
Bind to the valueChanging event of jqxGauge.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge on-value-changing="eventHandler()"></jqx-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxGauge.
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge on-value-changed="eventHandler()"></jqx-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
|
|
disable
|
Method
|
|
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge instance="getInstance()"></jqx-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
|
enable
|
Method
|
|
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge instance="getInstance()"></jqx-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
|
val
|
Method
|
|
<script src="~/jqwidgets/jqxgauge.js"></script>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ 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%" }; } <jqx-gauge instance="getInstance()"></jqx-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) { var result = instance[ "val"]();
|