Page 1 of 1
Legend margin with 2 columns of legend
Posted: Fri Aug 24, 2012 6:16 am
by 17262900
Hi
I am creating a bar chart in iOS application. The values to be plotted are very big and their text value is also very big.
Following is my code to bind series values:
Code: Select all
Steema.TeeChart.Styles.Bar SeriesBar = new Steema.TeeChart.Styles.Bar(chart.Chart);
SeriesBar.Title ="Quantity";
SeriesBar.Marks.Visible = false;
SeriesBar.Add(1644,"1.2 TSI Active");
SeriesBar.Add(1240,"1.2 TSI Ambition");
SeriesBar.Add(2506,"1.2 TSI Elegance");
SeriesBar.Add(2351,"1.4 TSI Active");
SeriesBar.Add(3385,"1.4 TSI Combi Ambition");
SeriesBar.Add(2867,"1.4 TSI Elegance");
SeriesBar.Add(1230,"1.6 TDI Combi Ambition");
SeriesBar.Add(3718,"1.6 TDI Limosine Active");
SeriesBar.Add(1935,"1.8 TSI Combi Ambition");
SeriesBar.Add(1190,"1.8 TSI Limosine Active");
SeriesBar.Add(2147,"1.8 TSI Limosine Ambition");
SeriesBar.Add(6888,"1.8 TSI Limosine Elegance");
SeriesBar.Add(4987,"2.0 TDI Active");
SeriesBar.Add(1928,"2.0 TDI Ambition");
SeriesBar.Add(742,"2.0 TDI Combi Ambition");
SeriesBar.Add(1455,"2.0 TDI Combi L&K");
SeriesBar.Add(3068,"2.0 TDI Elegance");
SeriesBar.Add(763,"2.0 TDI Limosine Ambition");
SeriesBar.Add(5092,"2.0 TDI Limosine Elegance");
SeriesBar.Add(3613,"3.6 VG Combi Ambition");
SeriesBar.Add(2270,"3.6 VG Combi Elegance");
SeriesBar.Add(7843,"A5 Sportback");
SeriesBar.Add(8565,"A6 Avant");
SeriesBar.Add(7724,"A6 Limousine");
SeriesBar.Add(3784,"Comfortline");
chart.Series.Add(SeriesBar);
and following is my code to set legend properties of the chart:
Code: Select all
chart.Legend.Transparent = true;
chart.Legend.Visible = true;
chart.Legend.Alignment = LegendAlignments.Bottom;
chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
chart.Legend.Symbol.Width = 10;
chart.Legend.Symbol.Position = LegendSymbolPosition.Left;
chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Justified;
chart.Legend.TextSymbolGap = 0;
chart.Legend.ColumnWidthAuto = false;
int[] LegendColWidth = {53,53};
chart.Legend.ColumnWidths = LegendColWidth;
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
chart.Legend.Font = LegendFont;
chart.Legend.HorizMargin = 0;
chart.Legend.VertMargin=0;
chart.Legend.Left = 0;
chart.Legend.VertSpacing = 0;
The above code is not able to reduce the margin on the left of the legend,
the gap between the symbol and text of the legend.
We want to display legend in two columns.
Please let us know how can we improve the display of the legend with large values.
Re: Legend margin with 2 columns of legend
Posted: Fri Aug 24, 2012 2:13 pm
by yeray
Hi,
This is just to make you know we are studying the issue and we'll be back to you asap.
Re: Legend margin with 2 columns of legend
Posted: Mon Aug 27, 2012 3:04 pm
by yeray
Hi,
Have you tried setting a different LegendColWidth? You could be assigning too much space to the first column. The following looks better for us here:
Re: Legend margin with 2 columns of legend
Posted: Tue Aug 28, 2012 4:17 am
by 17262900
Hi
We are able to reduce gap between legend symbol and legend text by using
Now we want to reduce the left margin of the legend, so that the text overlapping of the left column onto the symbol and text of right column can be avoided.
There is no space on the right side of the right legend, but there is space on the left of the left column of the legend.
We have used
Code: Select all
chart.Legend.HorizMargin = 0;
chart.Legend.VertMargin=0;
chart.Legend.Left = 0;
chart.Legend.TopLeftPos = 0;
, But there is no change on the left margin.
Please let us know how can we start legend from the left of the screen.
Re: Legend margin with 2 columns of legend
Posted: Thu Aug 30, 2012 7:23 am
by 17262900
Hi Yeray,
After further analysis i am able to move legend to the left using;
Code: Select all
chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
chart.Legend.Symbol.Width = 10;
chart.Legend.Symbol.Position = LegendSymbolPosition.Left ;
chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left;
chart.Legend.TextSymbolGap = 3;
chart.Legend.ColumnWidthAuto = false;
int[] LegendColWidth = {20,53};
chart.Legend.ColumnWidths = LegendColWidth;
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
chart.Legend.Font = LegendFont;
this.chart.GetLegendRect += delegate(object sender, GetLegendRectEventArgs e)
{
e.Rectangle = new Rectangle(e.Rectangle.Left - 55,e.Rectangle.Top,e.Rectangle.Width + 55 ,e.Rectangle.Height);
};
this.chart.GetLegendPos += delegate(object sender, GetLegendPosEventArgs e)
{
e.X = e.X-55;
e.XColor = e.XColor - 55;
};
But now there is extra space on the right side of the right column of the legend and left column's text is still overlapping on the right column of the legend.
Please let us know the right way to divide the whole width into two for two columns of the legend or the correct way to divide legend display into two columns.
Re: Legend margin with 2 columns of legend
Posted: Thu Aug 30, 2012 9:26 am
by yeray
Hi ,
Give it a try to the following property too:
Don't hesitate to let us know if you still have problems with it.
Re: Legend margin with 2 columns of legend
Posted: Thu Aug 30, 2012 10:00 am
by 17262900
Hi ,
The code above gives the error:
'Steema.TChart.Legend' does not contain a definition for 'LeftPercent'.
Please let us know how can we display legend in two columns and text of either column should not overlap.
Thanks
Re: Legend margin with 2 columns of legend
Posted: Fri Aug 31, 2012 12:19 pm
by Pep
Hello,
you're corect about the "LeftPercent" property, in NET code the equivalent is:
Code: Select all
_controller.chart.Legend.TopLeftPos = -45;
using the following code (most of them is your code) I get the attached image, do you get the same results ? In case that not, please send us the resulted image so we can investigate which the problem is.
Code: Select all
Steema.TeeChart.Styles.Bar SeriesBar = new Steema.TeeChart.Styles.Bar(_controller.chart.Chart);
SeriesBar.Title ="Quantity";
SeriesBar.Marks.Visible = false;
SeriesBar.Add(1644,"1.2 TSI Active");
SeriesBar.Add(1240,"1.2 TSI Ambition");
SeriesBar.Add(2506,"1.2 TSI Elegance");
SeriesBar.Add(2351,"1.4 TSI Active");
SeriesBar.Add(3385,"1.4 TSI Combi Ambition");
SeriesBar.Add(2867,"1.4 TSI Elegance");
SeriesBar.Add(1230,"1.6 TDI Combi Ambition");
SeriesBar.Add(3718,"1.6 TDI Limosine Active");
SeriesBar.Add(1935,"1.8 TSI Combi Ambition");
SeriesBar.Add(1190,"1.8 TSI Limosine Active");
SeriesBar.Add(2147,"1.8 TSI Limosine Ambition");
SeriesBar.Add(6888,"1.8 TSI Limosine Elegance");
SeriesBar.Add(4987,"2.0 TDI Active");
SeriesBar.Add(1928,"2.0 TDI Ambition");
SeriesBar.Add(742,"2.0 TDI Combi Ambition");
SeriesBar.Add(1455,"2.0 TDI Combi L&K");
SeriesBar.Add(3068,"2.0 TDI Elegance");
SeriesBar.Add(763,"2.0 TDI Limosine Ambition");
SeriesBar.Add(5092,"2.0 TDI Limosine Elegance");
SeriesBar.Add(3613,"3.6 VG Combi Ambition");
SeriesBar.Add(2270,"3.6 VG Combi Elegance");
SeriesBar.Add(7843,"A5 Sportback");
SeriesBar.Add(8565,"A6 Avant");
SeriesBar.Add(7724,"A6 Limousine");
SeriesBar.Add(3784,"Comfortline");
_controller.chart.Series.Add(SeriesBar);
_controller.chart.Legend.Transparent = true;
_controller.chart.Legend.Visible = true;
_controller.chart.Legend.Alignment = LegendAlignments.Bottom;
_controller.chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
_controller.chart.Legend.Symbol.Width = 10;
_controller.chart.Legend.Symbol.Position = LegendSymbolPosition.Left;
_controller.chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Justified;
_controller.chart.Legend.TextSymbolGap = 0;
_controller.chart.Legend.ColumnWidthAuto = false;
int[] LegendColWidth = {25,95};
_controller.chart.Legend.ColumnWidths = LegendColWidth;
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
_controller.chart.Legend.Font = LegendFont;
_controller.chart.Legend.HorizMargin = 0;
_controller.chart.Legend.VertMargin=0;
_controller.chart.Legend.Left = 0;
_controller.chart.Legend.VertSpacing = 0;
_controller.chart.Legend.TopLeftPos = -45;
Re: Legend margin with 2 columns of legend
Posted: Mon Sep 03, 2012 6:51 am
by 17262900
Hello,
We have implemented the code provided above. There is lot of improvement in the spacing.
Now the left column is still overlapping on the right column's symbol by 3-4 characters.
The only difference between your image and the image generated by us is that in your image there is no gap between legend numeric value and text i.e. (1,644 1.2 TSI Active), but in our image there are 2-3 spaces between legend numeric value and text.
If we reduce this space then our problem can be solved.
Following is the source code:
Code: Select all
this.chart.Walls.Visible = false;
this.chart.Header.Visible = false;
this.chart.Axes.Bottom.Labels.Angle = 90;
this.chart.Axes.Bottom.Labels.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left ;
//To disable chart movement on scroll/drag
this.chart.Panning.Active = false;
this.chart.Panning.Allow = ScrollModes.None;
this.chart.Legend.Transparent = true;
this.chart.Legend.Visible = true;
this.chart.Legend.Alignment = LegendAlignments.Bottom;
this.chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
this.chart.Legend.Symbol.Width = 10;
this.chart.Legend.Symbol.Position = LegendSymbolPosition.Left;
this.chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left ;
this.chart.Legend.TextSymbolGap = 0;
this.chart.Legend.ColumnWidthAuto = false;
int[] LegendColWidth = {25,95};
this.chart.Legend.ColumnWidths = LegendColWidth;
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
this.chart.Legend.Font = LegendFont;
this.chart.Legend.HorizMargin = 0;
this.chart.Legend.VertMargin=0;
this.chart.Legend.Left = 0;
this.chart.Legend.VertSpacing = 0;
this.chart.Legend.TopLeftPos = -45;
Please let us know how can we reduce the gap between the legend numeric figure and text.
Thanks
Re: Legend margin with 2 columns of legend
Posted: Wed Sep 05, 2012 4:48 am
by 17262900
Hello
Please see the attached screenshots:
- Screen shot of legend display in landscape
- Screen shot 2012-09-05 at 10.03.07 AM.png (163.16 KiB) Viewed 26339 times
- Screen shot of legend display in portrait.
- Screen shot 2012-09-05 at 10.03.25 AM.png (174.72 KiB) Viewed 26334 times
The code is as follows:
Code: Select all
if (this.InterfaceOrientation == UIInterfaceOrientation.LandscapeLeft || this.InterfaceOrientation == UIInterfaceOrientation.LandscapeRight)
{
int[] LegendColWidth = {50,105};// {53,53} ;
this.chart.Legend.ColumnWidths = LegendColWidth;
} else
{
int[] LegendColWidth1 = {25,95};// {53,53} ;
this.chart.Legend.ColumnWidths = LegendColWidth1;
}
The rest of the code is same :
Code: Select all
this.chart.Walls.Visible = false;
this.chart.Header.Visible = false;
this.chart.Axes.Bottom.Labels.Angle = 90;
this.chart.Axes.Bottom.Labels.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left;
//To disable chart movement on scroll/drag
this.chart.Panning.Active = false;
this.chart.Panning.Allow = ScrollModes.None;
this.chart.Legend.Transparent = true;
this.chart.Legend.Visible = true;
this.chart.Legend.Alignment = LegendAlignments.Bottom;
this.chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
this.chart.Legend.Symbol.Width = 10;
this.chart.Legend.Symbol.Position = LegendSymbolPosition.Left;
this.chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left;
this.chart.Legend.TextSymbolGap = 0;
this.chart.Legend.ColumnWidthAuto = false;
this.chart.Legend.HorizMargin = 0;
this.chart.Legend.VertMargin=0;
this.chart.Legend.Left = 0;
this.chart.Legend.VertSpacing = 0;
this.chart.Legend.TopLeftPos = -45;
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
this.chart.Legend.Font = LegendFont;
Please let us know how to correct the display of legend in both cases.
Thanks
Re: Legend margin with 2 columns of legend
Posted: Wed Sep 05, 2012 1:45 pm
by yeray
Hi,
I've just sent the dll we are using to do the tests here to the mail account you have registered in this forum. Could you please give it a try?
Thanks in advance.
Re: Legend margin with 2 columns of legend
Posted: Thu Sep 20, 2012 7:29 am
by 17262900
Thanks Yeray.
Could you please provide us the dll on emailid :
d.emmanoulopoulos@incadea.gr
Thanks
Re: Legend margin with 2 columns of legend
Posted: Thu Sep 20, 2012 8:21 am
by yeray
Hi,
I've just forwarded the mail I sent you to that address.
Re: Legend margin with 2 columns of legend
Posted: Fri Sep 21, 2012 6:44 am
by 17262900
Hi Yery
Thanks for forwarding the dll.
I have implemented in my project. Please see the following screen shots:
- Screen shot 2012-09-21 at 12.04.04 PM.png (46.16 KiB) Viewed 26247 times
- Screen shot 2012-09-21 at 12.04.24 PM.png (56.09 KiB) Viewed 26274 times
- Screen shot 2012-09-21 at 12.03.39 PM.png (52.33 KiB) Viewed 26273 times
As you can see that there is still some space on the right side of the 2nd column of legend which can be utilized
and display improved. Also the font size of legend is now very small which is reducing it's readability.
Following is my source code:
Code: Select all
this.chart.Panning.Active = false;
this.chart.Panning.Allow = ScrollModes.None;
this.chart.Legend.Transparent = true;
this.chart.Legend.Visible = true;
this.chart.Legend.Alignment = LegendAlignments.Bottom;
this.chart.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
this.chart.Legend.Symbol.Width = 10;
this.chart.Legend.Symbol.Position = LegendSymbolPosition.Left;
this.chart.Legend.TextAlign = MonoTouch.CoreText.CTTextAlignment.Left;
this.chart.Legend.TextSymbolGap = 3;
this.chart.Legend.ColumnWidthAuto = false;
if (this.InterfaceOrientation == UIInterfaceOrientation.LandscapeLeft || this.InterfaceOrientation == UIInterfaceOrientation.LandscapeRight)
{
int[] LegendColWidth = {70,80};
this.chart.Legend.ColumnWidths = LegendColWidth;
} else
{
int[] LegendColWidth1 = {33,57};
this.chart.Legend.ColumnWidths = LegendColWidth1;
}
Steema.TeeChart.Drawing.ChartFont LegendFont = new Steema.TeeChart.Drawing.ChartFont();
LegendFont.Size = 5;
this.chart.Legend.Font = LegendFont;
this.chart.Legend.HorizMargin = 0;
this.chart.Legend.VertMargin=0;
this.chart.Legend.Left = 0;
this.chart.Legend.VertSpacing = 0;
this.chart.Legend.TopLeftPos = -40;
Please let me know how to improve the legend display.
Re: Legend margin with 2 columns of legend
Posted: Tue Sep 25, 2012 12:31 pm
by 10050769
Hello incadea,
Sorry for the delay. Basically, the legend automatically calculates internally a limit that indicates the space need legend to paint its text correctly. In same way, limit influences directly in the columns of legend,so, it is used to decided if can be painted or not a column in legend rectangle. In your case, you are working in the limit of legend bounds and when you change columns size you reduce the automatic space text you have, to paint and causes texts overlapping. It problem doesn't have easy solution and the only alternative you have is customize your legend. I suggest you some ways to try achieve as you want:
1.- You can use a extralegend.
2.- You can customize text, for if exceed the maxim number of caracaters or size, draw "...".
3.- Paint the lengend directly in the canvas.
4.- Try to reduce the size of font.
I hope will helps and if you have any problems please, let me know.
Thanks,