We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

display value text

Thread ID:

Created:

Updated:

Platform:

Replies:

129340 Mar 14,2017 04:11 AM UTC Mar 16,2017 07:00 AM UTC ASP.NET Web Forms 3
loading
Tags: CircularGauge
Christopher Scholl
Asked On March 14, 2017 04:11 AM UTC

If i've set the value of the circulargauge from code behind like so:
circulargauge1.value = "5",

Is there a way i can display this value on the gauge itself?

Thanks

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 15, 2017 01:15 PM UTC

Hi Christopher, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Your requirement can be achieved by specifying showValue as true of PointerValueText property. Then you need to specify the distance to place the text from the scale. Find the code snippet below. 

ASP.NET: 

<ej:CircularGauge ID="CircularGauge"> 
      <Scales> 
         <ej:CircularScales > 
             <PointerCollection> 
                   <ej:Pointers ShowBackNeedle="true" Length="80" BackgroundColor= "black"> 
                       <PointerValueText Distance="60" ShowValue="true"> 
                       </PointerValueText> 
                   </ej:Pointers> 
            </PointerCollection> 
         </ej:CircularScales> 
     </Scales> 
</ej:CircularGauge> 



Screenshot: 
 
Also your requirement can be achieved by using custom labels. For this you need to specify the value in the customLabels property. If you need to update the pointerValue in this custom labels, then specify the value in the customLabels property as empty string as highlighted in below code snippet and by using DrawCustomLabel method, this can be achieved as depicted in below code snippet. Also specify the position, to place the text with respect to your requirement. 

<ej:CircularGauge ID="CircularGauge" DrawCustomLabel= "drawCustomLabels" > 
      <Scales> 
         <ej:CircularScales > 
             <CustomLabelCollection> 
                   <ej:CircularCustomLabel Value= ""> 
                       <Position X= "180" Y= "220" /> 
                   </ej:CircularCustomLabel> 
               </CustomLabelCollection> 
         </ej:CircularScales> 
     </Scales> 
</ej:CircularGauge> 

function drawCustomLabels(args) { 
            args.style.textValue = args.model.scales[0].pointers[0].value.toFixed(2).toString(); 
        } 

Screenshot: 
 
Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


Christopher Scholl
Replied On March 16, 2017 02:06 AM UTC

Thank you very much.  One more question for you - same thing, but with the linear gauge, how would i should the value of the gauge?  Thanks!

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 16, 2017 07:00 AM UTC

Hi Christopher,  

Thanks for your revert.  

We have analyzed your query. In the case of linear gauge, your requirement can be achieved by using custom labels. For this, you need to specify the value in the customLabel property. If you need to update the pointer value in this custom labels, then specify the value in the customLabel property as empty string as highlighted in below code snippet and by using DrawCustomLabel event, this can be achieved as depicted in below code snippet. Also specify the position, to place the text with respect to your requirement.  
 
ASP.NET: 

<ej:LinearGauge DrawCustomLabel= "drawCustomLabels"> 
     <Scales> 
          <ej:Scales> 
                <CustomLabelCollection> 
                       <ej:CustomLabel Value=" " Color="black"> 
                           <Position X="85" Y="33"/> 
                       </ej:CustomLabel> 
                </CustomLabelCollection> 
          </ej:Scales> 
  </Scales>  
</ej:LinearGauge> 
 
function drawCustomLabels(args) { 
       args.style.textValue = args.model.scales[0].markerPointers[0].value.toFixed(2).toString(); 
} 

Screenshot: 
 

In the linear gauge we are having two types of pointers (bar pointer and marker pointer). In the DrawCustomLabel event, you can either take the values of bar pointer or marker pointer. In the above code snippet we have used marker pointer value. Find the code snippet for bar pointer value below. 
 
function drawCustomLabels(args) { 
       args.style.textValue = args.model.scales[0].barPointers[0].value.toFixed(2).toString(); 
} 

Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;