The following methods are available in the Linear Gauge component.
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. |
var gauge = new ej.lineargauge.LinearGauge({
axes:[{
pointers:[{
value: 10
}]
}]
}, '#element');
document.getElementById('btn').onclick = () => {
gauge.setPointerValue(0, 0, 30);
};<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 20%;">
<div id="element" style="margin-top: 20%;"></div>
<button id="btn" type="button" width="15%" style="float: right">Click me</button>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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. |
var gauge = new ej.lineargauge.LinearGauge({
annotations: [{
content: '10',
zIndex: '1',
axisValue: 0
}]
}, '#element');
document.getElementById('btn').onclick = () => {
gauge.setAnnotationValue(0, '50', 50);
};<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 20%;">
<div id="element" style="margin-top: 20%;"></div>
<button id="btn" type="button" width="15%" style="float: right">Click me</button>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>The refresh method can be used to change the state of the component and render it again.
{% tab template= “linear-gauge/methods”, sourceFiles=“index.ts,index.html”, es5Template=“es5Refresh” %}
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes:[{
pointers:[{
value: 10
}]
}]
}, '#element');
document.getElementById('btn').onclick = () => {
gauge.refresh();
};