| animationDuration | int | 400 |
|
Sets or gets the <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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>
|
||
Events |
||
| valueChanging | Event | |
Code examples
Bind to the
<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) {
}
</script>
}
|
||
| valueChanged | Event | |
Code examples
Bind to the
<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) {
}
</script>
}
|
||
Methods |
||
| 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) {
instance["disable"]();
}
</script>
}
|
||
| 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) {
instance["enable"]();
}
</script>
}
|
||
| 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"]();
}
</script>
}
|
||