Methods in Vue Linear gauge component

11 Jun 202413 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. 
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { LinearGaugeComponent as EjsLineargauge, PointerDirective as EPointer, PointersDirective as EPointers,
  AxesDirective as EAxes, AxisDirective as EAxis } from "@syncfusion/ej2-vue-lineargauge";

const gauge = ref(null);

const clicked = () => {
  gauge.value.ej2Instances.setPointerValue(0, 0, 30);
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, PointerDirective, PointersDirective, AxesDirective, AxisDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    clicked: function () {
      this.$refs.gauge.ej2Instances.setPointerValue(0, 0, 30);
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

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. 
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-annotations>
            <e-annotation :content='contentTemplate' :zIndex='zindex' :axisValue='axisValue'>
            </e-annotation>
        </e-annotations>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AxesDirective as EAxes, AxisDirective as EAxis, AnnotationDirective as EAnnotation,
  AnnotationsDirective as EAnnotations, PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const gauge = ref(null);
const zindex = 1;
const contentTemplate = '10';
const axisValue = 0;

const clicked = () => {
  gauge.value.ej2Instances.setAnnotationValue(0, '50', 50);
};

provide('lineargauge',  [Annotations]);

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-annotations>
            <e-annotation :content='contentTemplate' :zIndex='zindex' :axisValue='axisValue'>
            </e-annotation>
        </e-annotations>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Annotations, AnnotationDirective, AnnotationsDirective, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  data:function(){
    return{
        zindex: 1,
        contentTemplate : '10',
        axisValue: 0
    }
  },
  methods: {
    clicked: function () {
      this.$refs.gauge.ej2Instances.setAnnotationValue(0, '50', 50);
    }
  },
  provide: {
    lineargauge: [Annotations]
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

refresh

The refresh method can be used to change the state of the component and render it again.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { ref } from "vue";
import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const gauge = ref(null);

const clicked = () => {
  gauge.value.ej2Instances.refresh();
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="clicked">Click</button>
      <ejs-lineargauge ref='gauge'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    clicked: function () {
      this.$refs.gauge.ej2Instances.refresh();
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>