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

Refresh visible flicker/blink

5 Answers 473 Views

Chart (Obsolete)

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

5 Answers, 1 is accepted

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.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!