This is a migrated thread and some comments may be shown as answers.

Refresh visible flicker/blink

5 Answers 116 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Heri .
Top achievements
Rank 1
Heri . asked on 30 Jun 2010, 08:04 AM
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.

5 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 01 Jul 2010, 02:23 PM
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
0
Heri .
Top achievements
Rank 1
answered on 10 Nov 2010, 10:25 AM
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 ?
0
Phil
Top achievements
Rank 2
answered on 18 Nov 2010, 07:46 PM
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.
0
Phil
Top achievements
Rank 2
answered on 18 Nov 2010, 09:32 PM
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!
0
Phil
Top achievements
Rank 2
answered on 19 Nov 2010, 03:22 AM

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!

Tags
Chart (Obsolete)
Asked by
Heri .
Top achievements
Rank 1
Answers by
Ves
Telerik team
Heri .
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Share this question
or