[Solved] Autolayout and rescaling the chart.

[Rafał]

Hi, I have run into following problem.

I've got following layout for chart parts (from the top to bottom):
Title - on the top
Legend - below the title
Plot area - below the legend

I've changed the height of chart and turned the AutoLayout option turned on.
It turned out that for greater chart's height values lots of empty space between the Legend and the Plot area appears.

This reminded me that there is a margin set on the plot's area, so I've changed it from 15% to 0 pixels.

But this didn't help at all. It still happens that while increasing the chart's height - gap between the Legend and the plot area grows despite I removed all the margins. The margin I've just cleared is not taken into account at all for some reason.

Is there a way to have the chart rescaled verticaly to large height values, while not having this strange margin between the Plot area and the Legend.

[Giuseppe]

Hello Rafał,

As noted in the documentation here, user-defined margin values are not taken into account when AutoLayout is enabled -- if you would like to specify custom margin values, you will need to disable the AutoLayout functionality.

As for the whitespace issue -- we are unable to reproduce the problem in our local tests. Please review the attached sample application that demonstrates our observations.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rafał]

Perhaps I described my problem badly, I'll take another try.

Again, I did the following:
- Set the AutoLayout to true
- Placed about 300 elements in the chart's data-source.
- Swapped the x-axis with y-axis by setting the series orientation to horizontal.
- Resized the chart vertically, so that the axis labels became human-readable.

Now if you take a look at the chart - you'll see there's quite a big margin between the top of the chart and the plot area.
(I've attached an example for that) The margin exists also when the chart's title is turned off.
And the same problem appears when I don't set the chart's data-source at all. I just gave the chart some series items to show how do I plan to use the chart.

When the AutoLayout is set to 'false'  then I get the problem positioning the axis labels right,
for they are being cut if I leave not enough space for them. I guess this was the reason why the auto-layout mode was created.

I tried to scale the axis labels manually by measuring the longest text width, positioning the plot area, etc. but I'm affraid controlling this manually will bring some nasty bugs in the future.

This is code showing how the chart was created:

            DataTable table = new DataTable();
            table.Columns.Add("Label");
            table.Columns.Add("Value", typeof (int));
            Random random = new Random((int) DateTime.Now.Ticks);
            for (int i = 0; i < 300; i++) {
                DataRow row = table.NewRow();
                row["Label"] = "Label number " + i;

                row["Value"] = random.Next(0, 1000);
                table.Rows.Add(row);
            }

            RadChart1.AutoLayout = true;
            RadChart1.ChartTitle.Visible = false;
            RadChart1.Height = 600*8;
            RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

            RadChart1.DataManager.LabelsColumn = "Label";
            RadChart1.DataManager.ValuesYColumns = new string[] {"Value"};
            RadChart1.DataSource = table;

            RadChart1.DataBind();

I'd prefer to use the AutoLayout feature in this case.

Is there a way to sort this problem out?

[Giuseppe]

Hi Rafał,

Thank you for elaborating on this.

We are now able to reproduce the described behavior -- it is caused by the fact that the AutoLayout works with relative percentage values when calculating the necessary margins for the PlotArea. Unfortunately, for extreme cases as this one (Height=4800 pixels), the percentage value becomes quite large as well and that is why you see the whitespace gaps at the top and the bottom of the chart.

We will forward your feedback to our developers so they can consider improving the automatic behavior for future versions of the control but for the time being you would need to disable the AutoLayout feature and set the PlotArea margin values manually like this:

DataTable table = new DataTable();
table.Columns.Add("Label");
table.Columns.Add("Value", typeof(int));
Random random = new Random((int)DateTime.Now.Ticks);
for (int i = 0; i < 300; i++)
{
    DataRow row = table.NewRow();
    row["Label"] = "Label number " + i;

    row["Value"] = random.Next(0, 1000);
    table.Rows.Add(row);
}

RadChart1.AutoLayout = false;
RadChart1.PlotArea.Appearance.Dimensions.Margins = new Telerik.Charting.Styles.ChartMargins(15, 100, 30, 50);
RadChart1.ChartTitle.Visible = false;
RadChart1.Height = 600 * 8;
RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

RadChart1.DataManager.LabelsColumn = "Label";
RadChart1.DataManager.ValuesYColumns = new string[] { "Value" };
RadChart1.DataSource = table;

RadChart1.DataBind();

Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.