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

<ej:CircularIndicators Type="image"> ???

Thread ID:

Created:

Updated:

Platform:

Replies:

124788 Jun 30,2016 05:50 AM UTC Jul 1,2016 10:33 AM UTC ASP.NET Web Forms 1
loading
Tags: CircularGauge
Julio
Asked On June 30, 2016 05:50 AM UTC

Hello, I have a problem in my Web Aplication.

 I am using a ej:CircularGauge with a background image. There is no parameter Type = "image" in ej:CircularIndicators so I use Javascript. My problem is that the image disappears when I update the value of the gauge with a timer .

This is the code:

Default.aspx

<asp:Timer runat="server" ID="UpdateTimer" Interval="1000" OnTick="UpdateTimer_Tick" />
    <asp:UpdatePanel runat="server" ID="TimedPanel" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="UpdateTimer" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <ej:CircularGauge Width="149" Radius="100" Height="145" EnableAnimation="false" DrawIndicators="drawIndicators"
                ClientIDMode="Static" runat="server" ID="DirectionClimatologyGauge" BackgroundColor="transparent" Load="loadGaugeTheme">
                <Scales>
                    <ej:CircularScales SweepAngle="359" StartAngle="270" Radius="53" ShowLabels="false" ShowTicks="true" BackgroundColor="transparent"
                        ShowIndicators="true" ShowScaleBar="true" Size="3" Maximum="360" MajorIntervalValue="90" MinorIntervalValue="22.5">
                        ....
                    </ej:CircularScales>
                </Scales>
            </ej:CircularGauge>
        </ContentTemplate>
    </asp:UpdatePanel>

script.js

function createDirectionClimatologyGauge() {
            $("#DirectionClimatologyGauge").ejCircularGauge({
                scales: [{
                    indicators: [{
                        type: "image", value: 0,
                        imageUrl: "Images/gauges/gauge_direction.png",
                    }]
                }],
            });
        }


Default.aspx.cs

protected void UpdateTimer_Tick(object sender, EventArgs e)
    {
        Random rnd = new Random();
        DirectionClimatologyGauge.Value = rnd.Next(0, 20);
    }

Thanks.



Saravana Kumar Kanagavel [Syncfusion]
Replied On July 1, 2016 10:33 AM UTC

Hi Julio, 
 
Thanks for contacting Syncfusion Support. 
We have analyzed your queries. 
 
Query #1: There is no parameter Type = "image" in ej:CircularIndicators.  
 
We are able to reproduce the reported issue. So we have logged an issue report for this. For more details regarding this, kindly follow up the incident which we have created under your account. 
 
Query #2: My problem is that the image disappears when I update the value of the gauge with a timer. 
 
We can’t able to reproduce the reported issue. And also we would like to inform that when we have updated the pointer value per 2 second once, the circular gauge updated properly with indicator image. And we have setting the image to the indicator by using “load” event. 
 
Please refer the code example below  
 
[ASPX] 
 
<ej:CircularGauge ClientIDMode="Static" Load="addImage" runat="server" ID="CircularGauge1"> 
</ej:CircularGauge> 
 
[JS] 
 
function addImage(gauge) { //Load event triggered 
             gauge.model.scales[0].indicators[0].position.x = 100; 
             gauge.model.scales[0].indicators[0].position.y = 120; 
             gauge.model.scales[0].indicators[0].type = "image"; 
             gauge.model.scales[0].indicators[0].imageUrl = "download.jpg"; 
             gauge.model.scales[0].showIndicators = true; 
     } 
 
And also please find the following code snippet for changing the pointer value. 
 
[ASPX] 
 
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer> 
 
[CS] 
protected void Timer1_Tick(object sender, EventArgs e) 
        { 
           Random random = new Random(); 
           var value =  random.Next(10,100); 
           CircularGauge1.Scales[0].Pointers[0].Value = value; 
        } 
 
And also we have made a sample for your reference and attached in the below location 
 
  
And if you still face any concern kindly revert us your sample or modified the attached sample to replicate the reported issue. So it would be helpful for us to provide you the exact solution sooner.   
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 


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

;