RadChart self-adjusting width and height

[Alan]

Hi all,

Is there a way of setting the width and height of a radchart control to be a percentage value fitting into a panel, so that when window resizes, the panel also resizes (eg. 50% of the window), therefore the radchart within the panel also resizes automatically.
At the moment, width and height of radcontrol seems to only accept fixed number of pixels.

Cheers
Alan

[Ves]

Hello Alan,

Unfortunately, RadChart supports only fixed pixels size. Two possible solutions -- server-side and client-side -- are shown in this code library. Hope this helps.

Sincerely,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mark]

Hi,

I am trying to get my chart to be 100% width & Height using the code library sample link.. however its a dead link.

Can you give me the updated link to the zip files  please ?

Many Thanks
Mark

[Ves]

Hi Mark,

Here is an alternative link:

http://www.telerik.com/community/code-library/aspnet-ajax/chart/resize-chart-image-in-radsplitter.aspx

And these are direct links to the attached samples:

• ResizeChartInSplitter_ClientSide.zip
• ResizeChartInSplitter_WebUI.zip
• ResizeChartInSplitterServerSide_WebUI.zip

Let us know if you still experience any problems getting to the code library / examples.

Regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mark]

Hi ,
I can resize the chart to fit the radpane when the pane is resized using ajaxmanager, however, how do i get the chart to fit the radpane when the page is loaded. ie; the chart is small until the pane is resized. I want the chart to fit the radpane without having to resize the pane first.

Thanks
Mark

[Ves]

Hello Mark,

One option is to set the size of the RadPane containing the chart in pixels. This way you know it and you can give the same size to the chart. However, in case the size of RadPane is in percents, you cannot know the pixels value before the page is loaded on the client. You can detect the initial load, retrieve the RadPane size and call AjaxRequest function in the very same manner as when the splitter is resized. I have attached an updated version of the page, which implements this approach.

Best regards,
Ves
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.

[Mark]

Hi Ves,

I have used your code and this works great..however, it keeps firing the page load ! 

initialLoad.value is never getting set to 0 ..

Any ideas ?
Thanks
Mark

[Ves]

Hello Mark,

I am sorry for this mistake. The hidden field used to detect the initial load is updated on the server, so it should be present in the UpdatedControls collection of RadAjaxManager. I have attached the updated version of the page.

Greetings,
Ves
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.

[Mark]

Hi Ves,

That works great now, many thanks.
One other query i have now though..!

I have a drill down feature to another page on the series click, which i have working great. This now doesn't work as the chart is ajaxed.
I use this code...

 

Protected Sub chartPipeline_Click(ByVal sender As Object, ByVal args As Telerik.Charting.ChartClickEventArgs) Handles chartPipeline.Click

 

 

If args.SeriesItem IsNot Nothing Then

 

 

If args.SeriesItem.Parent.Name = "Quotation" Then

 

Response.Write(

"<SCRIPT>parent.location='../Dashboard/Sales/MyPipeline_Month.aspx?ID=False_" & args.SeriesItem.Name.ToString().Replace(Chr(10), "") & "_" & UserID & "'</SCRIPT>")

 

 

 

 

End If

 

 

End If

 

 

End Sub

 

Is there any way i can still do this with the chart ajaxed ?

Also, every now and then i get the red X instead of the chart. This seems to be totally random when it occurs and happens on random charts. Is there any reason for this ?

Many thanks for your great support
Mark

[Ves]

Hello Mark,

Please, check this help topic for details about redirecting to another page. As for the red X - we have provided a reply in the other thread you have started.

Regards,
Ves
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.

[Andrew]

I have tried the code examples given above (using both Q1 and now Q2 2009), and was getting quite frustrated until I noted that the name of the client side event is ajaxRequest and not AjaxRequest. Changing the A to lower case sorted it out.

Is this something that has changed in the later releases of RadControls?

[Ves]

Hello Andrew,

The new name - ajaxRequest has been around for a while. AjaxRequest used to be the method name in RadAjax for ASP.NET (a.k.a. RadAjax classic, RadAjax.Net2.dll). On the other hand RadAjax for ASP.NET AJAX (part of Telerik.Web.UI) is built on top of MS ASP.NET AJAX, so it uses the same naming convention - hence the ajaxRequest name.

Regards,
Ves
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.

[Andrew]

Hi,

Thanks, I was really just posting to clarify this for others.

Having said that, it is a recurrent issue for me, that I find answers on these forums - which are very helpful, but often are not quite right due to a version difference. Many of the posts on this thread are dated such that I would have expected them to apply to recent versions.

I accept that it is difficult, but when you can it would be helpful to be as clear as possible where a solution applies.

Thanks again.

[Ves]

Hi Andrew,

I can see where the confusion comes from. I cannot really remember the history of this thread, but I can see it starts back almost a year ago and it is based on a code library entry, which is even older. At the time the code library project was created, there was a dual support - for both AjaxRequest and ajaxRequest. This has been kept for a limited period of time and then removed. I am sorry about this confusion.

All the best,
Ves
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.

[ANIRBAN BISWAS]

Hi I am using radchart to display a graph in my project, after setting proper width anf height to that graph and getting an extra white color padding on height (may be of 5 - 10 px) on each bar image. Plz help me out on this with any helpful information.
I need it urgently.

[Andrew]

Hi Ves, and rest of team.

OK further to the above, I have run into further problems with resizing the chart - becasue i really want to do this on a page which has a master page (and hence a master AjaxManager and a Proxy on the actual page).

I have read Todd Anglin's blog about how "easy" it is to hook up the AjaxRequest handler via the proxy (though surely it woudl be even easier to give the proxy manager an attribute to set the event handler?). I have even figured out that when controls are on a child page (of a master) the client IDs change, but I am currently stuck getting the chart to actually re-display via Ajax.

I have tried setting the Ajax Settings both programatically and declaratively.

My code is as follows; would you be kind enough to suggest where I am going wrong, or perhpas just post a small demo which I can draw inspiration from.

This is the javascript in the Header Content part of my child page. Note that getting the reference to the HiddenField "isInitialLoad" has to change from your examples above, and likewise getting the client reference of the panel that has been resized (in my case the panel ID is RadPaneDisplay)

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">
                function pageLoad(sender, args) {
                    //var initialLoad = $get("isInitialLoad");
                    var initialLoad = $get('<%= isInitialLoad.ClientID %>');
                    if (initialLoad.value == "1") {
                        var resizedPane = $find('<%= RadPaneDisplay.ClientID %>');
                        request_chart_resize(resizedPane);
                    }
                }

                function ResizeChart_ServerSide(sender, args) {
                    request_chart_resize(sender);
                }

                function request_chart_resize(sender) {
                    var arg1 = sender.get_width() + "px";
                    var arg2 = sender.get_height() + "px";
                    var arguments = arg1 + "," + arg2;
                    var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>');
                    ajaxManager.ajaxRequest(arguments);
                }
            </script>

        </telerik:RadScriptBlock>

The following is the C# on the server side. You will note that I have commented out the 2 lines which try to set the AjaxSettings programatically so that I can try the declarative apporach, but either way does not seem to work.

        protected void Page_Load(object sender, EventArgs e)
        {
            //Get reference to AjaxManager (from Master)
            var manager = RadAjaxManager.GetCurrent(this);
            //Create a new delegate to handle the AjaxRequest event
            manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxManagerProxy_AjaxRequest);
            //Add your ajax settings programmatically (with ref to Master manager)
            //manager.AjaxSettings.AddAjaxSetting(manager, this.RadChart1);
            //manager.AjaxSettings.AddAjaxSetting(manager, this.isInitialLoad);
        }

        //Handle the Ajax event in your ContentPage code behind
        private void AjaxManagerProxy_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            isInitialLoad.Value = "0";
            string argument = (e.Argument);
            String[] stringArray = argument.Split(",".ToCharArray());
            RadChart1.Width = new Unit(stringArray[0]);
            RadChart1.Height = new Unit(stringArray[1]);
        }

If I try to arrange the (Ajax) settings declaratively, I discover that to get any sort of Ajax effect I have to refer to the master Ajax Control ID (RadAjaxmaster1) and not the proxy; or I can uncomment the 2 lines above to arrange the settings programatically, but in both cases, I get the Ajax Loading panel displayed whilst the server processes, and then a blank display (no chart at all).

I hope it is clear (what I am doing), and I presume that I am just missing something.

Andrew

P.S. I am using the 2009 Q2 version of Web.UI

P.P.S. Further to this, it may well be relevant. I note that with Ajax settings in place, there is an additional "div" placed around the Chart, and this div does not have any size allocated. This suggests that the problem is similar to the overall issue of getting ajaxified grids and such things to size to 100% (high/wide).

On my master page, I have in palce the suggested fix from other threads, where a CSS Style is defined as follows:

            #<%=PanelClientID%> {width: 100%; height: 100%; margin: 0px;}

 Where the PanelClientID vaariable is setup in the code behind to get the ID of the Ajax Panel.

The problem seems to be that it is getting the ID of the panel which surrounds the HiddenField: The page source shows:

#ctl00_ctl00_ContentPlaceHolderBody_isInitialLoadPanel {width: 100%; height: 100%; margin: 0px;}

So does this mean that we need a more sophisticated method of setting the size of all the Ajax Panels when there are a number of controls to be updated via Ajax and we want the 100% sizing effect too?

P.P.P.S.

Having dug into this even more, it appears that since the solution to re-sizing the chart, including a re-size on first load requires that there is a hidden field (isInitialLoad) to carry the state, and both this field and the chart control become the subject of the Ajax update, there are 2 separate panels created, and the one for the Hidden field (being the second item in my list of Ajax settings) is the one which propagates into the CSS.

Having moved the Hidden feild so that it is located after the chart on the page, I now get the re-sized chart, and then a large expanse of white space below presumably the panale with the hidden field in it.

[Giuseppe]

Hi Andrew,

We have attached a modified version of the sample application that supports Master/Content page scenario.

Hope this helps.


All the best,
Manuel
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.

[Andrew]

Hi Manuel,

Many thanks.

[Garry]

I downloaded this project and run in VS2010 with .Net 4 and get this error at run-time:

Microsoft JScript runtime error: 'arguments.callee.caller' is null or not an object

Would you be able to update the sample please?

[Ves]

Hello Garry,

Please, find attached an updated version, which does not throw exception in .net 4.

Best regards,
Ves
the Telerik team

[mainak]

Hi,

I am using Defualt2.zip file.
But i am getting an null exception in the following line.

 

 

RadAjaxManager.GetCurrent(this).AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

 

The code as follows.

Aspx file:

<%

 

@ Page Language="C#" AutoEventWireup="true"

 

 

 

CodeFile="Default.aspx.cs" Inherits="Test2.Default" Title="Untitled Page" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

 

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

 

 

 

<script type="text/javascript">

 

 

 

function ResizeChart_ServerSide(sender, args) {

 

request(sender);

}

 

 

function request(sender) {

 

 

 

var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>');

 

 

 

var arg1 = sender.get_width() + "px";

 

 

 

var arg2 = sender.get_height() + "px";

 

 

 

var arguments = arg1 + "," + arg2;

 

ajaxManager.ajaxRequest(arguments);

}

 

 

</script>

 

 

 

</telerik:RadScriptBlock>

 

 

 

 

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="Server">

 

 

 

<AjaxSettings>

 

 

 

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

 

 

 

<UpdatedControls>

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadChart1" />

 

 

 

<telerik:AjaxUpdatedControl ControlID="isInitialLoad" />

 

 

 

</UpdatedControls>

 

 

 

</telerik:AjaxSetting>

 

 

 

</AjaxSettings>

 

 

 

</telerik:RadAjaxManagerProxy>

 

 

 

<asp:HiddenField ID="isInitialLoad" Value="1" runat="server" />

 

 

 

<telerik:RadSplitter ID="RadSplitter2" runat="server">

 

 

 

<telerik:RadPane ID="RadPane1" runat="server" Width="10px" Scrolling="none">

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>

 

 

 

<telerik:RadPane ID="RadPane2" runat="server" Height="800px" Width="600px">

 

 

 

<telerik:RadSplitter ID="Radsplitter4" runat="server" Height="100%" Width="100%"

 

 

 

Orientation="Horizontal">

 

 

 

<telerik:RadPane ID="Radpane3" runat="server" Height="100%" Width="100%" Scrolling="none"

 

 

 

OnClientResized="ResizeChart_ServerSide">

 

 

 

<telerik:RadChart ID="RadChart1" runat="server">

 

 

 

<Series>

 

 

 

<telerik:ChartSeries>

 

 

 

<Items>

 

 

 

<telerik:ChartSeriesItem YValue="3">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

<telerik:ChartSeriesItem YValue="6">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

<telerik:ChartSeriesItem YValue="2">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

<telerik:ChartSeriesItem YValue="1">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

<telerik:ChartSeriesItem YValue="5">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

<telerik:ChartSeriesItem YValue="4">

 

 

 

</telerik:ChartSeriesItem>

 

 

 

</Items>

 

 

 

</telerik:ChartSeries>

 

 

 

</Series>

 

 

 

</telerik:RadChart>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="Radsplitbar4" runat="server"></telerik:RadSplitBar>

 

 

 

<telerik:RadPane ID="Radpane6" runat="server" Height="50px">

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

Aspx.cs file.
---------------

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;

 

using

 

 

Telerik.Web.UI;

 

namespace

 

 

Test2

 

{

 

 

public partial class Default : System.Web.UI.Page

 

{

 

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

 

RadAjaxManager.GetCurrent(this).AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

 

}

 

 

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

 

{

isInitialLoad.Value =

 

"0";

 

 

 

string argument = (e.Argument);

 

 

 

String[] stringArray = argument.Split(",".ToCharArray());

 

RadChart1.Width =

 

new Unit(stringArray[0]);

 

RadChart1.Height =

 

new Unit(stringArray[1]);

 

}

}

}

Webconfig file
--------------------

<?

 

 

xml version="1.0"?>

 

<!--

 

 

 

Note: As an alternative to hand editing this file you can use the

web admin tool to configure settings for your application. Use

the Website->Asp.Net Configuration option in Visual Studio.

A full list of settings and comments can be found in

machine.config.comments usually located in

\Windows\Microsoft.Net\Framework\v2.x\Config

-->

<

 

 

configuration>

 

<

 

 

appSettings/>

 

<

 

 

connectionStrings/>

 

<

 

 

system.web>

 

<!--

 

 

 

Set compilation debug="true" to insert debugging

symbols into the compiled page. Because this

affects performance, set this value to true only

during development.

 

 

 

-->

 

<

 

 

compilation debug="true">

 

<

 

 

assemblies>

 

<

 

 

add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>

 

<

 

 

add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>

 

</

 

 

assemblies>

 

</

 

 

compilation>

 

<!--

The <authentication> section enables configuration

of the security authentication mode used by

ASP.NET to identify an incoming user.

 

 

 

-->

 

<

 

 

authentication mode="Windows"/>

 

<!--

The <customErrors> section enables configuration

of what to do if/when an unhandled error occurs

during the execution of a request. Specifically,

it enables developers to configure html error pages

to be displayed in place of a error stack trace.

<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">

<error statusCode="403" redirect="NoAccess.htm" />

<error statusCode="404" redirect="FileNotFound.htm" />

</customErrors>

 

 

 

-->

 

</

 

 

system.web>

 

</

 

 

configuration>

 

Please have attached file as PNG file.
Please let me know if I have missed any thing.


Regards
mainak

[Yavor]

Hi Garry,

The cause of this may be that the ajax control cannot be located as expected at runtime. To properly trace the issue, it willbe best if you send us a small working project, demonstrating your exact setup - to attach the sample, you can open a formal support ticket. We will debug it locally, and advise you further.

Kind regards,
Yavor
the Telerik team

[Travis]

You have to add the RadAjaxManager which was on the master page in the previous zipped project:

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

[Ravi]

I am using RadControls For APS.net Ajax Q1 2011 SP1, Looking for "VB.net example" for RadChart self-adjusting width and height