|
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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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 formatFunction = "{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) {
}
</script>
}
|
|
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 formatFunction = "{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) {
}
</script>
}
|
|
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 formatFunction = "{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) {
}
</script>
}
|
|
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 formatFunction = "{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) {
}
</script>
}
|
|
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 formatFunction = "{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) {
}
</script>
}
|
|
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 formatFunction = "{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) {
}
</script>
}
|
|
|
|
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 formatFunction = "{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["refresh"]();
}
</script>
}
|
|
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 formatFunction = "{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["render"]();
}
</script>
}
|
|
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 formatFunction = "{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]);
}
</script>
}
|