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:
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.
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:
- Chart
- PlotArea
- 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
0
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:
I hope this helps.
Regards,
Petar Kirov
Telerik
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:
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Source Error:
Stack Trace:
I run your code right before the chart DataBind, if that matters.
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:
|
I run your code right before the chart DataBind, if that matters.
0
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
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.
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
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
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.
.
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
Hi Razak,
By setting the chart.PlotArea.Appearance.Dimensions.AutoSize property to false, you can specify freely the Dimensions.Height, Dimensions.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
By setting the chart.PlotArea.Appearance.Dimensions.AutoSize property to false, you can specify freely the Dimensions.Height, Dimensions.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..
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
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
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.