Legend margin with 2 columns of legend

[incadea]

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.

[Yeray]

Hi,

This is just to make you know we are studying the issue and we'll be back to you asap.

[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:

Code: Select all

int[] LegendColWidth = {20,73};

[incadea]

Hi

We are able to reduce gap between legend symbol and legend text by using

Code: Select all

int[] LegendColWidth = {20,73};

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.

[incadea]

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.

[Yeray]

Hi ,

Give it a try to the following property too:

Code: Select all

TChart1.Legend.LeftPercent = -XX

Don't hesitate to let us know if you still have problems with it.

[incadea]

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

[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;

[incadea]

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

[incadea]

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 26352 times

Screen shot of legend display in portrait.

Screen shot 2012-09-05 at 10.03.25 AM.png (174.72 KiB) Viewed 26347 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

[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.

[incadea]

Thanks Yeray.
Could you please provide us the dll on emailid : [email protected]

Thanks

[Yeray]

Hi,

I've just forwarded the mail I sent you to that address.

[incadea]

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 26260 times

Screen shot 2012-09-21 at 12.04.24 PM.png (56.09 KiB) Viewed 26287 times

Screen shot 2012-09-21 at 12.03.39 PM.png (52.33 KiB) Viewed 26286 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.

[Sandra]

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,