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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>									
}

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>									
}

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>									
}

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>									
}

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>									
}

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>									
}

<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>									
}

<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>									
}

<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>									
}