1. Home
  2. Forum
  3. React - EJ 2
  4. How to get a lead and lag type of circular gauge in with 0 at both the ends?

How to get a lead and lag type of circular gauge in with 0 at both the ends?

I am trying to build a circular gauge (180deg gauge (270-90 angle)) for monitoring a power factor value that has both lead and lag values. 
The scale must start from 0 ( Left Hand Side) and end with 0 ( Right Hand Side ) with a mid-value of 1. The needle towards the  LHS shows the lag values between 0 -1.5 and leads to the RHS ​with the values between 1-0.

I am not getting how to do so. There is an image in the attachment to get a better idea.


Thank you!




Attachment: Gauge_b163dea1.rar

3 Replies
IR Indumathi Ravi Syncfusion Team March 2, 2022 01:45 PM UTC

Hi Satyam, 

Thank you for contacting Syncfusion support. 

We can achieve the scenario by customizing the axis labels with the "axisLabelRender" event and displaying the changed value via annotation with the "loaded" event. We have created a sample and video to demonstrate the same and it can be download from the below link. 


Code Snippet: 

axisLabelRender(args) { 
   if (args.value > 1.0 && args.value <= args.axis.maximum) 
      args.text = args.axis.maximum - args.value; 
  } 

loaded(args) { 
    if ( 
      args.gauge.axes[0].pointers[0].value > 1.0 && 
      args.gauge.axes[0].pointers[0].value <= args.gauge.axes[0].maximum 
    ) { 
      args.gauge.setAnnotationValue( 
        0, 
        0, 
        '<div><span id="annotationValue" style="color:#F08080;font-size:15px;">' + 
          (args.gauge.axes[0].maximum - args.gauge.axes[0].pointers[0].value) + 
          ' ' + 
          'LAG </span></div>' 
      ); 
    } else { 
      args.gauge.setAnnotationValue( 
        0, 
        0, 
        '<div><span id="annotationValue" style="color:#F08080;font-size:15px;">' + 
          args.gauge.axes[0].pointers[0].value + 
          ' ' + 
          'LAG </span></div>' 
      ); 
    } 
  } 


  <CircularGaugeComponent id="circulargauge"  axisLabelRender={this.axisLabelRender.bind(this)} 
   loaded={this.loaded.bind(this)}> 
         <AxesDirective> 
              <AxisDirective 
                  startAngle={270} 
                  endAngle={90} 
                  radius="100%" 
                  minimum={0} 
                  maximum={2} 
                  lineStyle={{ width: 15, color: '#F08080' }} 
                > 
                  //.. 
                 //.. 
                <PointersDirective> 
                    <PointerDirective 
                      value={0.8} 
                      radius="60%" 
                     color="#F08080" 
                    /> 
                  </PointersDirective> 
            </AxisDirective> 
         </AxesDirective> 
    </CircularGaugeComponent> 


Please follow the below UG document for more information on needle pointers. 
 
NOTE: We do not have a needle pointer bending, as shown in your image. 

Please let us know if the above sample meets your requirement. 

Regards, 
Indumathi R.

SA Satyam March 3, 2022 05:19 PM UTC

Hi Indumathi,


Thank You for your response.

This solution worked perfectly. Once again thank you very much!.


Regards, 

Satyam


IR Indumathi Ravi Syncfusion Team March 4, 2022 07:27 AM UTC

Hi Satyam, 

Thank you for the update. 
  
Please let us know if you need any further assistance. 

Regards, 
Indumathi R 


Loader.
Up arrow icon