Refresh visible flicker/blink

Thread is closed for posting
6 posts, 0 answers
  1. Heri .
    Heri . avatar
    29 posts
    Member since:
    Mar 2010

    Posted 30 Jun 2010 Link to this post

    I've tried "http://demos.telerik.com/aspnet-ajax/controls/examples/integration/aspajaxchartapplication/defaultcs.aspx?product=chart",
    but I have noticed a blink/flickers. how to eliminate the blink
    /flickers.
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 01 Jul 2010 Link to this post

    Hi Heri .,

    You can use two chart images and swap them using javascript. You can find an example in this forum thread:

    http://www.telerik.com/community/forums/aspnet-ajax/chart/chart-blinks-on-ajax-refresh.aspx

    Regards,
    Ves
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Heri .
    Heri . avatar
    29 posts
    Member since:
    Mar 2010

    Posted 10 Nov 2010 Link to this post

    i use four chart but still blinking. i try in local network and client show chart still blink. and I've used the example in http://www.telerik.com/ClientsFiles/200519_chartswitchimages.zip

    How to elimination blink ?
  5. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 18 Nov 2010 Link to this post

    I have downloaded and tried that "solution", but it still flickers.

    My scenario is I have a dashboard which has six charts, and they are updated in turn via a timer so each one gets refreshed once every 12 seconds. This page was originally developed using the classic radcontrols, and has worked fine for a couple of years with no flickering. I am in the process of upgrading the application to the ajax radcontrols, and the flickering now makes the page unusable - I'd likely get sued for inducing epileptic fits.

    What did you break from the classic radcontrols to make the ajax chart control behave so badly?

    Is there any actual solution for this issue? The image switching makes no noticable difference that I can detect.

    I am using RadControls Ajax Q2 2010 SP1.
  6. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 18 Nov 2010 Link to this post

    For anyone searching for a solution to this, here's what I have done. It seems to work. I'm basically using a normal image control to display the chart output, using javascript to set the image source to be the (hidden) charts image source. My example is refreshing on a timer, so I set the image source to a single pixel transparent gif so I don't see a red cross when the page loads.
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="chartswitch.aspx.vb" Inherits="chartswitch" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function SwitchImg() {
                var panel1 = document.getElementById("<%=Panel1.ClientID%>");
                var chartimg = panel1.getElementsByTagName("img")[0];
                var myimg = document.getElementById("<%=myimg.ClientID%>");
                myimg.src = chartimg.src;
            }
        </script>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="False">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="tmr1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
                <ClientEvents OnResponseEnd="SwitchImg" />
            </telerik:RadAjaxManager>
            <asp:Image ID="myimg" runat="server" src = "images/blank.gif" />
            <asp:Panel ID="Panel1" runat="server" style="display:none;" >
                <telerik:RadChart ID="RadChart1" runat='server' UseSession="true" CreateImageMap="False"
                    ChartImageFormat="png">
                    <Series>
                        <telerik:ChartSeries Name="Series 1">
                            <Items>
                                <telerik:ChartSeriesItem Name="Item 1" YValue="5" />
                            </Items>
                        </telerik:ChartSeries>
                    </Series>
                </telerik:RadChart>
                <asp:Timer runat="server" ID="tmr1" Interval="10" />
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    Partial Class chartswitch
        Inherits System.Web.UI.Page
      
        Protected Sub tmr1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles tmr1.Tick
            RadChart1.Series(0).AddItem(DateTime.Now.Second)
            tmr1.Interval = 2000
        End Sub
      
    End Class

    No flicker!
  7. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 18 Nov 2010 Link to this post

    add this line to the javascript function to get the imagemap as well:

     

    myimg.useMap = chartimg.useMap;

     - you'll need to make mying an imagemap rather than an image of course.

     

    Still no flickering!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017