RadChart self-adjusting width and height

Thread is closed for posting
24 posts, 0 answers
  1. Alan
    Alan avatar
    6 posts
    Member since:
    Apr 2008

    Posted 25 Aug 2008 Link to this post

    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
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 26 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 13 Nov 2008 Link to this post

    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
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Nov 2008 Link to this post

    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:
    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.
  6. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 17 Feb 2009 Link to this post

    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
  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 18 Feb 2009 Link to this post

    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.
  8. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 18 Feb 2009 Link to this post

    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

  9. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 20 Feb 2009 Link to this post

    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.
  10. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 20 Feb 2009 Link to this post

    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
  11. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 23 Feb 2009 Link to this post

    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.
  12. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 07 Jul 2009 Link to this post

    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?
  13. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 09 Jul 2009 Link to this post

    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.
  14. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 09 Jul 2009 Link to this post

    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.
  15. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 10 Jul 2009 Link to this post

    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.
  16. ANIRBAN BISWAS
    ANIRBAN BISWAS avatar
    1 posts
    Member since:
    Jul 2009

    Posted 10 Jul 2009 Link to this post

    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.
  17. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 12 Jul 2009 Link to this post

    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.
  18. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 15 Jul 2009 Link to this post

    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.
  19. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 15 Jul 2009 Link to this post

    Hi Manuel,

    Many thanks.
  20. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 03 Nov 2010 Link to this post

    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?
  21. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 05 Nov 2010 Link to this post

    Hello Garry,

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

    Best regards,
    Ves
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  22. mainak
    mainak avatar
    9 posts
    Member since:
    Sep 2010

    Posted 31 Jan 2011 Link to this post

    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
  23. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 03 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  24. Travis
    Travis avatar
    223 posts
    Member since:
    Jan 2003

    Posted 02 May 2011 Link to this post

    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>
  25. Ravi
    Ravi avatar
    1 posts
    Member since:
    May 2011

    Posted 12 May 2011 Link to this post

    I am using RadControls For APS.net Ajax Q1 2011 SP1, Looking for "VB.net example" for RadChart self-adjusting width and height
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017