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

Flicker when updating two RadCharts

4 Answers 38 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Teodorico
Top achievements
Rank 1
Teodorico asked on 07 Jun 2009, 11:05 PM

Hi,
I need to place two RadCharts on same page and they have to be updated with the same event. When the update gets triggered by RadAjaxManager, the second defined graph in AjaxUpdateControl always flickers. Here is the example code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GraphFlicker.aspx.cs" Inherits="Application_Test_GraphFlicker" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<%@ 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 runat="server">

    <title></title>

    <script type="text/javascript">

   

      function pageLoad() {

      }

   

    </script>

</head>

<body>

    <form id="form1" runat="server">

   

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

       

            <asp:Button runat="server" ID="btn1" Text="Test" />

           

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="btn1">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="btn1" LoadingPanelID="LoadingPanel" />

                        <telerik:AjaxUpdatedControl ControlID="RadChart1" LoadingPanelID="LoadingPanel" />

                        <telerik:AjaxUpdatedControl ControlID="RadChart2" LoadingPanelID="LoadingPanel" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

            </AjaxSettings>

        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Vista" />

           

            <telerik:RadChart ID="RadChart1" runat="server" SkinsOverrideStyles="false" Width="240px" Height="400px" ChartTitle-TextBlock-Text="Chart" ChartTitle-Appearance-Visible="false">

                  <PlotArea Appearance-Dimensions-Margins="0px">

                        <XAxis MaxValue="5" MinValue="1" Step="1">

                        </XAxis>

                        <YAxis MaxValue="25" Step="5">

                        </YAxis>

                        <YAxis2 MaxValue="5" MinValue="1" Step="1">

                        </YAxis2>

                  </PlotArea>

                  <Series>

                        <telerik:ChartSeries Name="Series 1" Type="Pie" Appearance-ShowLabels="true" Appearance-LegendDisplayMode="Nothing" >

                              <Items>

                                    <telerik:ChartSeriesItem YValue="60" Name="F" Label-TextBlock-Text="F #%" ></telerik:ChartSeriesItem>

                                    <telerik:ChartSeriesItem YValue="20" Name="P" Label-TextBlock-Text="P #%" Label-Appearance-Visible="true"></telerik:ChartSeriesItem>

                                    <telerik:ChartSeriesItem YValue="20" Name="C" Label-TextBlock-Text="C #%" ></telerik:ChartSeriesItem>

                              </Items>

                        </telerik:ChartSeries>                   

                  </Series>

            </telerik:RadChart>

 

            <telerik:RadChart ID="RadChart2" runat="server" SkinsOverrideStyles="false" Width="240px" Height="400px" ChartTitle-TextBlock-Text="Chart" ChartTitle-Appearance-Visible="false">

                  <PlotArea Appearance-Dimensions-Margins="0px">

                        <XAxis MaxValue="5" MinValue="1" Step="1">

                        </XAxis>

                        <YAxis MaxValue="25" Step="5">

                        </YAxis>

                        <YAxis2 MaxValue="5" MinValue="1" Step="1">

                        </YAxis2>

                  </PlotArea>

                  <Series>

                        <telerik:ChartSeries Name="Series 1" Type="Pie" Appearance-ShowLabels="true" Appearance-LegendDisplayMode="Nothing" >

                              <Items>

                                    <telerik:ChartSeriesItem YValue="60" Name="F" Label-TextBlock-Text="F #%" ></telerik:ChartSeriesItem>

                                    <telerik:ChartSeriesItem YValue="20" Name="P" Label-TextBlock-Text="P #%" Label-Appearance-Visible="true"></telerik:ChartSeriesItem>

                                    <telerik:ChartSeriesItem YValue="20" Name="C" Label-TextBlock-Text="C #%" ></telerik:ChartSeriesItem>

                              </Items>

                        </telerik:ChartSeries>                   

                  </Series>

            </telerik:RadChart>

       

    </form>

</body>

</html>

 

If I replace the two graphs with asp:Panel, they work as expected, no flicker at all:

<asp:Panel ID="RadChart1" runat="server" Width="240px" Height="400px" BackColor="Red">
</asp:Panel>

<asp:Panel ID="RadChart2" runat="server" Width="240px" Height="400px" BackColor="Blue">
</asp:Panel>

 

Thanks,

 

Teo

4 Answers, 1 is accepted

Sort by
0
Teodorico
Top achievements
Rank 1
answered on 07 Jun 2009, 11:14 PM

I also tried wrapping both graphs in an a single asp:Panel with the same result, except that now the graph that flickers is random, not the one defined as second.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="btn1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="btn1" LoadingPanelID="LoadingPanel" />

                <telerik:AjaxUpdatedControl ControlID="pnlTest" LoadingPanelID="LoadingPanel" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Vista" />

 

<asp:Panel ID="pnlTest" runat="server">

      RadCharts here...

</asp:Panel>

Thanks.

0
Sebastian
Telerik team
answered on 11 Jun 2009, 08:30 AM
Hello Teodorico,

This is indeed a strange issue and unfortunately I am not able to replicate it in my local tests. Can you please verify that you are using the latest version 2009.1.527 of RadControls for ASP.NET AJAX in your project and provide a live url where the flicker can be seen? Thus I will do everything possible to provide an appropriate explanation/fix.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Teodorico
Top achievements
Rank 1
answered on 13 Jun 2009, 03:15 PM

Sebastian,
Yes, I am using 2009.1.527.35.
You can test the page at http://66.237.238.206/graph/test/Graphflicker.aspx

I am using IE8 and FF 3.0.10.

Thank you,

 

Teo

0
Sebastian
Telerik team
answered on 17 Jun 2009, 01:58 PM
Hello Teodorico,

Thank you for the live test page. I was able to reproduce the flicker locally and suspect that this is due to the way images are refreshed when ASP.NET AJAX is used.

Can you please test the same case by disabling the RadAjaxManager temporary and wrapping the chart instances inside regular MS UpdatePanel? Do you observe the same effect with this configuration? You may also compare the result when using two instances of standard asp Image of charts and share the results with us.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
Ajax
Asked by
Teodorico
Top achievements
Rank 1
Answers by
Teodorico
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or