|
animationDuration
|
int
|
1000
|
Sets or gets the animationDuration property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge animation-duration="500" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
backgroundColor
|
string
|
#e0e0e0
|
Sets or gets the backgroundColor property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge background-color="red" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
barSpacing
|
int
|
4
|
Sets or gets the barSpacing property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge bar-spacing="12" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
baseValue
|
int
|
null
|
Sets or gets the baseValue property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge base-value="30" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
colorScheme
|
string
|
scheme01
|
Sets or gets the colorScheme property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge color-scheme="scheme02" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
customColorScheme
|
string
|
'scheme01'
|
Sets or gets the customColorScheme property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge color-scheme="customColors" custom-color-scheme='{"name":"customColors","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}' values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
disabled
|
bool
|
false
|
Sets or gets the disabled property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge disabled="true" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
endAngle
|
int
|
0
|
Sets or gets the endAngle property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge end-angle="180" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
formatFunction
|
string
|
null
|
Sets or gets the formatFunction property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge format-function="formatFunction" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
height
|
int
|
400
|
Sets or gets the height property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge height="600" values="barGaugeValues" width="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
labels
|
string
|
null
|
Sets or gets the labels property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge labels="labels" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
max
|
int
|
100
|
Sets or gets the max property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge max="150" values="barGaugeValues" width="600" height="600" ranges="ranges"></jqx-bar-gauge>
|
|
min
|
int
|
0
|
Sets or gets the min property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge min="-25" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
relativeInnerRadius
|
int
|
0.3
|
Sets or gets the relativeInnerRadius property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge relative-inner-radius="0" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
rendered
|
string
|
null
|
Sets or gets the rendered property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge rendered="rendered" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
startAngle
|
int
|
225
|
Sets or gets the startAngle property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge start-angle="200" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
title
|
string
|
null
|
Sets or gets the title property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge title="title" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
tooltip
|
string
|
null
|
Sets or gets the tooltip property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge tooltip="tooltip" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
useGradient
|
bool
|
true
|
Sets or gets the useGradient property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge use-gradient="false" values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
values
|
List<string>
|
[]
|
Sets or gets the values property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge values="barGaugeValues" width="600" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
width
|
int
|
400
|
Sets or gets the width property.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge width="600" values="barGaugeValues" height="600" max="150" ranges="ranges"></jqx-bar-gauge>
|
|
|
|
drawEnd
|
Event
|
|
Code examples
Bind to the drawEnd event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-draw-end="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
drawStart
|
Event
|
|
Code examples
Bind to the drawStart event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-draw-start="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
initialized
|
Event
|
|
Code examples
Bind to the initialized event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-initialized="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
tooltipClose
|
Event
|
|
Code examples
Bind to the tooltipClose event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-tooltip-close="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
tooltipOpen
|
Event
|
|
Code examples
Bind to the tooltipOpen event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-tooltip-open="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxBarGauge.
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge on-value-changed="eventHandler()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
|
|
refresh
|
Method
|
|
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge values="barGaugeValues" width="600" height="600" max="150" ranges="ranges" instance="getInstance()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
|
render
|
Method
|
|
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge values="barGaugeValues" width="600" height="600" max="150" ranges="ranges" instance="getInstance()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
|
val
|
Method
|
|
<script src="../jqwidgets/jqxbargauge.js"></script>@{ ViewData["Title"] = "ASP .NET MVC Bar Gauge Example"; List<string> ranges = new List<string>() { '{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }', '{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }', '{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }' }; List <double> barGaugeValues = new List <double>() { 102, 115, 130, 137 }; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string labels = '{ connectorColor: 'green', connectorWidth: 1}'; string title = '{text: 'Ranking'}'; string tooltip = '{formatFunction: function(value, index) { return value + ' $';}, visible: true, precision: 0 }'; string rendered = '{rendered: function() {}}'; string format Function = '{formatFunction: function(value, index, color) { return "red";}}'; } <jqx-bar-gauge values="barGaugeValues" width="600" height="600" max="150" ranges="ranges" instance="getInstance()"></jqx-bar-gauge> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance[ "val"]([112, 125, 150, 137]);
|