Controlling the Chart appearance

Thread is closed for posting
10 posts, 0 answers
  1. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 03 Jun 2013 Link to this post

    I'm having a hard time figuring what's happening behind the scene when Chart height is changed proportionate to number of items displayed in it.

    I tried to maintain the height of each bar to 25px and set the height of the chart to numOfItems * 25 + XXX where XXX is a constant throughout the test to accommodate the chart title, and any padding. I have also set fixed margins instead of the default percentage margin of some elements' Appearance.Dimension such as:

    1. Chart
    2. PlotArea
    3. ChartTitle

    Legend, Y-Axis label & item labels are all hidden.

    But no matter what I set the constant XXX is, the chart height did follow the formula, but not the PlotArea's height.

    Please see the attached screen shots where:

    chartImage10.png - numOfItems is 10
    chartImage30.png - numOfItems is 30
    chartImage70.png - numOfItems is 70

    As you can see, the gaps gets wider (as pointed out with the arrows) when the chart's height is larger. I know that the PlotArea's dimension is automatically determined but there must be a way to make it of certain height by modifying the chart's height, without the gaps affecting the height of the PlotArea at the end.
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 06 Jun 2013 Link to this post

    Hi Abdul,

    Thanks for contacting us.

    Generally we recommend using the AutoLayout feature, because in most cases it aranges the chart elements (ChartTitle, PlotArea and Legend) efficiently enough.

    However, if you want to  position the elements yourself (leaving the AutoLayout to false), you will have to consider the following distribution of the width height:

    Height:
    1) ChartTitle Margins.Top
    2) ChartTitle Height
    3) ChartTitle Margins.Bottom
    4) PlotArea Margins.Top
    5) PlotArea Height
    6) PlotArea Margins.Bottom

    Width:
    1)PlotArea Margins.Left
    2) PlotArea Height
    4) PlotArea Marigns.Right

    Given that the PlotArea Height is 25 * numOfItems, you will need to calculate the chart height to be:
    25 * numOfItems + ChartTitle .Margins.Top/Bottom . Height + PlotArea . Margins.Top/Bottom.

    Here is an example:
    this.chart.SeriesOrientation = ChartSeriesOrientation.Horizontal;
     
    chart.PlotArea.Appearance.Dimensions.AutoSize = false;
                 
    chart.ChartTitle.Appearance.Dimensions.AutoSize = false;
    chart.ChartTitle.Appearance.Dimensions.Height =
        new Unit(24, UnitType.Pixel);           
    chart.ChartTitle.Appearance.Dimensions.Margins.Top = 0;
                 
    chart.PlotArea.Appearance.Dimensions.Margins.Top =
        new Unit(24 + 15, UnitType.Pixel);
    chart.PlotArea.Appearance.Dimensions.Margins.Bottom =
        new Unit(65, UnitType.Pixel);
    chart.PlotArea.Appearance.Dimensions.Height =
        new Unit(numOfItems * 25, UnitType.Pixel);
                 
    chart.Appearance.Dimensions.Height =
        numOfItems * 25 + 24 + 15 + 65;
     
     
    chart.ChartTitle.Appearance.Dimensions.Width =
        new Unit(100, UnitType.Pixel);
    double marginsLeftRight = 50;
    double plotAreaWidth = 600.0;
    chart.PlotArea.Appearance.Dimensions.Margins.Left =
        new Unit(marginsLeftRight, UnitType.Pixel);
    chart.PlotArea.Appearance.Dimensions.Margins.Right =
        new Unit(marginsLeftRight, UnitType.Pixel);
    chart.PlotArea.Appearance.Dimensions.Width = new Unit(plotAreaWidth);
     
    chart.Width = new System.Web.UI.WebControls.Unit(
        plotAreaWidth + 2 * marginsLeftRight, System.Web.UI.WebControls.UnitType.Pixel);

    I hope this helps.
     
    Regards,
    Petar Kirov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 07 Jun 2013 Link to this post

    Thanks for your answer.

    I tried your code but it threw an exception:

    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

    Source Error: 

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace: 

    [NullReferenceException: Object reference not set to an instance of an object.]
       Telerik.Charting.ChartText.Distibute(Single factor, WrapContext context) +57
       Telerik.Charting.TextBlockTitle.Measure(RenderEngine renderEngine) +283
       Telerik.Charting.ChartBaseLabel.Measure(RenderEngine renderEngine) +1360
       Telerik.Charting.ChartBaseLabel.CalculatePosition(RenderEngine renderEngine) +1528
       Telerik.Charting.RenderEngine.CalculateElementsForRender(IContainer element) +649
       Telerik.Charting.RenderEngine.CalculateElementsForRender() +79
       Telerik.Charting.Chart.GetImage(Int32 width, Int32 height) +385

    I run your code right before the chart DataBind, if that matters.
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 12 Jun 2013 Link to this post

    Hi Razak,

    I am not sure why you are experiencing this problem. I have attached a small project that uses the same code, but does not throw any exception.
    Could you please open a formal support ticket and attach a runable project that reproduces the exception so we can investigate it locally.

    Thanks for the understanding.
     
    Regards,
    Petar Kirov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 16 Jul 2013 Link to this post

    How to let the control automatically calculate the left margin of the plotarea?

    I'm afraid that turning off autosize and autolayout will fix the problem as stated in my OP, but then, it will introduce another problem.
  7. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 19 Jul 2013 Link to this post

    Hi Razak,

    You can either use RadChart's AutoLayout feature and let the control arrange its elements, or you can disable it and the arrange the elements yourself.

    Perhaps it will be better if you hide RadChart's title and use CSS to layout and stylize a simple div tag placed before RadChart.

    Another option which you may consider is to use our newer charting solution - RadHtmlChart. Here you can find its online demos and here its documentation.
     

    Regards,
    Petar Kirov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 22 Jul 2013 Link to this post

    Well I was hoping that you can provide the information on where to find the property to turn off the gap calculation as pointed out in my post above. I have turned off (setting to a fixed number) all other margin/padding properties with default value of percentage that i could find. I was thinking I might had missed something since the gap still varies as the chart height changes.

    I have tried hiding the the title before, but the gaps still there. (E.g: look at the bottom of the chart, just below the plotarea.)

    The new htmlchart is not an option since it doesn't have the scale-breaks feature.
    .
  9. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 25 Jul 2013 Link to this post

    Hi Razak,

    By setting the chart.PlotArea.Appearance.Dimensions.AutoSize property to false, you can specify freely the Dimensions.HeightDimensions.Margins.Top and Dimensions.Margins.Bottom properties. Using these properteis you can remove the gap. 

    The code that I provided in my previous posts does the same and should fix the problem with the gap that you are experiencing. The gap is constant and does not change when the number of items and respectively - the height of the chart, change. I have attached several screenshots for reference.

    It would be very helpful if you could provide a runable project that reproduces the exception that you are getting, that was preventing you from using the sample code that I provided.
     
    Regards,
    Petar Kirov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 25 Jul 2013 Link to this post

    Here we go again, going around in circle I guess.

    By setting chart.PlotArea.Appearance.Dimensions.AutoSize property to false, it will lose the ability to auto calculate the left margin of the plotarea, to properly show the Y-Axis item labels.

    For your information, the chart I'm trying to make can be drilled-down, up to 3 levels. And each item label is varying in length. 

    I have successfully ran your code, and that's how I know why setting the chart.PlotArea.Appearance.Dimensions.AutoSize
    = false will give me that cropped y-axis item label problem..

  11. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 30 Jul 2013 Link to this post

    Razak,

    RadChart can either calculate the width, height, margin and position properties of all of its elements, or you can do this manually. It is not possible to use RadChart's layout mechanism to perform this calculation partially (eg. only for the left margin of the PlotArea). 

    Perhaps you can use this method to get a rough estimate of the labels width.
     

    Regards,
    Petar Kirov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017