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