This is a migrated thread and some comments may be shown as answers.

Controlling the Chart appearance

9 Answers 247 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Razak
Top achievements
Rank 2
Razak asked on 04 Jun 2013, 03:17 AM
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.

9 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 07 Jun 2013, 01:22 AM
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.
0
Razak
Top achievements
Rank 2
answered on 07 Jun 2013, 11:27 PM
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.
0
Petar Kirov
Telerik team
answered on 12 Jun 2013, 02:53 PM
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.
0
Razak
Top achievements
Rank 2
answered on 17 Jul 2013, 12:42 AM
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.
0
Petar Kirov
Telerik team
answered on 19 Jul 2013, 04:55 PM
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.
0
Razak
Top achievements
Rank 2
answered on 22 Jul 2013, 07:20 AM
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.
.
0
Petar Kirov
Telerik team
answered on 25 Jul 2013, 08:14 AM
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.
0
Razak
Top achievements
Rank 2
answered on 25 Jul 2013, 03:21 PM
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..

0
Petar Kirov
Telerik team
answered on 30 Jul 2013, 01:40 PM
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.
Tags
Chart (Obsolete)
Asked by
Razak
Top achievements
Rank 2
Answers by
Petar Kirov
Telerik team
Razak
Top achievements
Rank 2
Share this question
or