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. Image for the cookie policy date

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

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.



1 Reply

SK Saravana Kumar Kanagavel Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon