I want to use the RadChart component. To try it, I first used the Telerik demo for scrolling and zooming (http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/zoomingscrolling/defaultcs.aspx) and it works.
But when I put this code in our application, the chart is not renderer properly after the first page load, no data is shown and the loading image still there. It happen if I show the loading panel on page load as described on Telerik on-line documentation (http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html).
I tried to bind data again on ajax request without sucess as in this post (http://www.telerik.com/community/forums/aspnet-ajax/ajax/show-loading-panel-on-initial-page-load.aspx) except I remake the entire data source because the chart don`t have a Rebind() method.
Anybody have an idea about how to use the RadChart component and still having a loading panel on page load?
Thanks.
Here is my source code
ASP
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestChart.aspx.cs" Inherits="MyWebApplication.TestChart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<!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">
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
// Show Ajax Loading Panel while loading the page
function pageLoad(sender, eventArgs) {
if (!eventArgs.get_isPartialLoad()) {
$find("<%= radAjaxManager.ClientID %>").ajaxRequest("InitialPageLoad");
}
}
</script>
</telerik:RadCodeBlock>
</head>
<body class="BODY">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel" OnAjaxRequest="radAjaxManager_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="radAjaxManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="radAjaxManager" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<!-- Ajax Loading Panel: Takes entire page and image center on it -->
<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" IsSticky="True" Style="height: 100%; width: 100%;">
</telerik:RadAjaxLoadingPanel>
<div class="bigModule">
<div class="bigModuleBottom">
<div class="title">
To test the Zooming and Scrolling capabilities on this demo:</div>
<ul>
<li>Zoom to a portion of the chart by dragging and selecting with the mouse a rectangle to
set a new scale for the chart. AJAX retrieves the visible "chunk" of the chart that
was selected. You can navigate the chart by scrolling and new image "chunks"
are requested on-the-fly.</li>
<li>You can also use stand-alone scrolling by explicitly setting EnableZoom="false". You
can still provide XScale and YScale factor values on the server-side.</li>
</ul>
</div>
</div>
<div class="module">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadChart ID="RadChart1" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
<ClientSettings ScrollMode="Both" />
<Series>
<telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
</telerik:ChartSeries>
</Series>
<Legend Visible="false"></Legend>
<ChartTitle TextBlock-Text="Zooming / Scrolling (no initial scaling)">
</ChartTitle>
</telerik:RadChart>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadChart ID="RadChart2" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
<ClientSettings EnableZoom="false" ScrollMode="XOnly" XScale="4" />
<Series>
<telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
<Appearance FillStyle-MainColor="223, 87, 60">
</Appearance>
</telerik:ChartSeries>
</Series>
<Legend Visible="false"></Legend>
<ChartTitle TextBlock-Text="Scrolling only (initial XScale applied)">
</ChartTitle>
</telerik:RadChart>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace MyWebApplication
{
public partial class TestChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 20; i++)
{
DataRow dr = dt.NewRow();
dr[0] = rand.Next(20);
dt.Rows.Add(dr);
}
RadChart1.DataSource = dt;
RadChart1.DataBind();
RadChart2.DataSource = dt;
RadChart2.DataBind();
}
}
protected void radAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
// Try rebinding data...
if (e.Argument == "InitialPageLoad")
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 20; i++)
{
DataRow dr = dt.NewRow();
dr[0] = rand.Next(20);
dt.Rows.Add(dr);
}
RadChart1.DataSource = dt;
RadChart1.DataBind();
RadChart2.DataSource = dt;
RadChart2.DataBind();
}
}
}
}
4 Answers, 1 is accepted
Most probably the reason for this problem is that, the chart http handler is not registered in the web.config file. The easiest way to do this is by using the Smart Tag (on #4 in the link) menu in design mode and clicking the "Add RadChart HTTP Handler to Web.Config" option. After doing that you should have something like this:
<configuration> <system.web> <!--Other declarations--> <httpHandlers> <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false" /> <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" /> </httpHandlers> </system.web> <system.webServer> <!--Other declarations--> <handlers> <add name="ChartImage_axd" verb="*" preCondition="integratedMode" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" /> <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" /> </handlers> </system.webServer></configuration>I am attaching a runnable project (with the code copied from your last post and the needed settings applied to the web.config file) for reference.
I hope this helps.
Greetings,
Petar Kirov
the Telerik team
Rank 1
The problem is still the same, which is the initial render is not done in both charts if I show the loading panel on the first page load by javascript, like if the Ajax call to refresh the chart content was cancelled. After that if I zoom on first chart (zoomable chart) it works because the component will make ajax call for all chunks of the graph. But the second chart (scrollable chart), it will work for all chunks except the first one because the chart assume he already have this one.
Just for you knowledge, I already tried to set the RequestQueueSize attribute of RadAjaxManager to something greater than 0 (like 5) without success.
It seems there is a collision between the ajax request and the chart callback when zoom/scroll is enabled. The solution here would be to enable charts' zoom/scroll when the initial ajax request is made. That is -- configure the charts' client settings in the AjaxRequest event handler. In addition, the code for the ajax request should be executed only on initial page load, so I removed it from the page and added it to RadAjaxManager.ResponseScripts collection. On the first ajax request this collection is cleared, so no more artificial ajax requests are made.
I have attached an updated version of Petar's example.
Kind regards,
Ves
the Telerik team
Rank 1
Just for your knownledge or anyone as a more complexe scenario, here is the modifications I have made to make it works in my case where my RadChart is in a Content Page with a Master Page which hold the RadAjaxManager.
Because my Master Page don't know my RadChart component all the code cannot be placed in the Master Page. So in the Page_Load of my User Control I add the following lines (even if radChart is on a RadAjaxPanel, I must manually add the event on radAjaxManager because the event is not fired on the RadAjaxPanel on page load):
// Add radChart to be updated when radAjaxManager make an Ajax call
RadAjaxManager radAjaxManager = RadAjaxManager.GetCurrent(Page);
radAjaxManager.AjaxRequest += radAjaxPanel_AjaxRequest;
for (int i = 0; i < radAjaxManager.AjaxSettings.Count; i++){
if (radAjaxManager.AjaxSettings[i].AjaxControlID == radAjaxManager.ID){
radAjaxManager.AjaxSettings[i].UpdatedControls.Add(new AjaxUpdatedControl(radChart.ID, ""));
break;
}
}Also, I had the following code:
protected void radAjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "InitialPageLoad")
{
radChart.ClientSettings.ScrollMode = ChartClientScrollMode.Both
}
}
Thanks again for your support