Methods in ASP.NET MVC Linear Gauge
17 Feb 20224 minutes to read
The following methods are available in the Linear Gauge component.
setPointerValue
To change the pointer value dynamically, use the setPointerValue
method in the Linear Gauge component. The following are the arguments for this method.
Argument name | Description |
---|---|
axisIndex | Specifies the index of the axis in which the pointer value is to be updated. |
pointerIndex | Specifies the index of the pointer to be updated. |
pointerValue | Specifies the value of the pointer to be updated. |
@using Syncfusion.EJ2.LinearGauge;
@Html.EJS().Button("togglebtn").Content("Print").CssClass("e-flat").Render()
@Html.EJS().LinearGauge("linear").Axes(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAxis>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
{
Pointers = new List<Syncfusion.EJ2.LinearGauge.LinearGaugePointer>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugePointer
{
Value = 80
}
}
}
}).Render()
<script>
document.getElementById('togglebtn').onclick = function () {
var linearObj = document.getElementById('linear').ej2_instances[0];
linearObj.setPointerValue(0, 0, 30);
};
</script>
setAnnotationValue
To change the annotation content dynamically, use the setAnnotationValue
method in the Linear Gauge component. The following are the arguments for this method.
Argument name | Description |
---|---|
annotationIndex | Specifies the index number of the annotation to be updated. |
content | Specifies the text for the annotation to be updated. |
axisValue | Specifies the value of the axis where the annotation is to be placed. |
@using Syncfusion.EJ2.LinearGauge;
@Html.EJS().Button("togglebtn").Content("Print").CssClass("e-flat").Render()
@Html.EJS().LinearGauge("linear").Axes(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAxis>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
{
Pointers = new List<Syncfusion.EJ2.LinearGauge.LinearGaugePointer>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugePointer
{
Value = 10
}
}
}
}).Annotations(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAnnotation> {
new Syncfusion.EJ2.LinearGauge.LinearGaugeAnnotation
{
Content = "10", ZIndex = "1", AxisValue = 0
}}).Render()
<script>
document.getElementById('togglebtn').onclick = function () {
var linearObj = document.getElementById('linear').ej2_instances[0];
linearObj.setAnnotationValue(0, '50', 50);
};
</script>
refresh
The refresh
method can be used to change the state of the component and render it again.
@using Syncfusion.EJ2.LinearGauge;
@Html.EJS().Button("togglebtn").Content("Print").CssClass("e-flat").Render()
@Html.EJS().LinearGauge("linear").Axes(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAxis>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
{
Pointers = new List<Syncfusion.EJ2.LinearGauge.LinearGaugePointer>
{
new Syncfusion.EJ2.LinearGauge.LinearGaugePointer
{
Value = 10
}
}
}
}).Render()
<script>
document.getElementById('togglebtn').onclick = function () {
var linearObj = document.getElementById('linear').ej2_instances[0];
linearObj.refresh();
};
</script>