Label Separation still a problem

[biqpaulson]

Good Morning,

This posts references .Net 4.0 and Steema TeeChart for .NET 2017 4.1.2017.03140

Edited compliment out and placed into the proper thread: http://www.teechart.net/support/viewtop ... 413#p73467

We are still having problems with angled text and separation values.

Here is separation of 0:

Separation-0.PNG (14.49 KiB) Viewed 22291 times

(problem #1 with descenders and ascenders overlapping)

Here is separation of 1:

Separation-1.PNG (9.3 KiB) Viewed 22289 times

(problem #2 labels all but disappear when they could have been drawn every other one.)

Take a form and place a TChart and a button on the form. The code will take care of arranging things and the size of things.

Using the code below run the application to see overlaps in descenders and ascenders.
Also, push the button to see the problem between separation of 0 and 1. The labels all but disappear but could have been drawn every other label and had a separation of one percent.

So there are two problems:

• Ascenders and descenders overlap when allowing the user to resize the chart with separation of 0.
• Separation of 1 percent is not one percent but huge with even a one degree of angled text.

Code: Select all

using Steema.TeeChart;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace LabelSeparation
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.Size = new Size(670, 509);
            this.button1.Location = new Point(34, 1);
            this.button1.Click += button1_Click;
            InitializeChart();
        }

        private void InitializeChart()
        {
            tChart1.Location = new Point(29, 36);
            tChart1.Size = new Size(600, 400);
            tChart1.Anchor = AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top;
            tChart1.Aspect.View3D = false;
            tChart1.Legend.Visible = false;
            tChart1.Header.Visible = false;

            Steema.TeeChart.Styles.Series TheSeries = new Steema.TeeChart.Styles.Bar();
            TheSeries.Marks.Visible = false;
            tChart1.Series.Add(TheSeries);
            tChart1.Axes.Bottom.Labels.Font = new Steema.TeeChart.Drawing.ChartFont(tChart1.Chart, new Font("Arial", 9.7F, FontStyle.Regular));
            TheSeries.Add(0, 273423155, "Facilities");
            TheSeries.Add(1, 201478304, "Information Tech...");
            TheSeries.Add(2, 184443667, "Externals, Financi...");
            TheSeries.Add(3, 177618980, "Marketing Adverti...");
            TheSeries.Add(4, 113353935, "Human Resources");
            TheSeries.Add(5, 93689069, "General & Admini...");
            TheSeries.Add(6, 51526793, "Travel");
            TheSeries.Add(7, 28238498, "Exempt");
            TheSeries.Add(8, 16809770, "Other");

            tChart1.Axes.Bottom.Labels.Angle = 30;
            tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Auto;
            tChart1.Axes.Bottom.Labels.Separation = 0;
            this.Height = 400;
            this.Width = 367;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (tChart1.Axes.Bottom.Labels.Separation == 0)
                tChart1.Axes.Bottom.Labels.Separation = 1;
            else
                tChart1.Axes.Bottom.Labels.Separation = 0;
        }
    }
}

[Christopher]

Hello,

firstly just to clarify that the release notes of the latest public version of TeeChart.NET (v. 4.1.2017.03140) make no mention of having addressed any issue similar to the one you mention.

Secondly, in a manner to highlight the underlying issue, I've made the following screenvideo using the .NET 4.0 version of TeeChart.dll:
https://www.screencast.com/t/KBSk7RL61TF

in this video we can see that when Labels.Separation=0 and the Chart is resized, the labels do not overlap each other. Can you reproduce this behaviour at your end? If so, could you please be more specific as to why the sample code you used in your message is a problem to you?

[biqpaulson]

Good Morning,

I watched the video and in it I see you are running the code without the placement of components size / location given in the example code in the constructor to show to you the issue. Unfortunately, the customer does not continually resize the chart. They stop at locations where they would like to display the data. In some of those locations the users are seeing the issue. I explicitly gave code at one of those stop points. This issue gets worse when there are international characters that use more ascender/descender mix of characters. (I would have given an example of that but I was not sure that the international characters would get through the forum code post appropriately)

Code: Select all

            this.Size = new Size(670, 509);
            this.button1.Location = new Point(34, 1);

If you had left that code which was contained in the constructor you would have gotten the exact same screen uploaded as a picture displayed in issue #1.

Yes, under a continuous resize it is hard to see the overlapping. That is why I gave you oneof the stop points where it was easy to see the problem.
Even during your video you display the issue. Here is a stopping point where there is an issue at 0:15 and 0:23 of the video. I see several other places during the video which also have the same problem.

VideoFrameCapture.PNG (25.07 KiB) Viewed 22263 times

You did not address the second issue with a separation of "1" giving such a large label separation. Should I open another forum thread for that issue and not place two problems in the same thread?

[biqpaulson]

Here is another way to show the problem. Replace the code:

Code: Select all

            TheSeries.Add(0, 273423155, "Facilities");
            TheSeries.Add(1, 201478304, "Information Tech...");
            TheSeries.Add(2, 184443667, "Externals, Financi...");
            TheSeries.Add(3, 177618980, "Marketing Adverti...");
            TheSeries.Add(4, 113353935, "Human Resources");
            TheSeries.Add(5, 93689069, "General & Admini...");
            TheSeries.Add(6, 51526793, "Travel");
            TheSeries.Add(7, 28238498, "Exempt");
            TheSeries.Add(8, 16809770, "Other");

With:

Code: Select all

            TheSeries.Add(0, 273423155, "OpOpOpOpOpOp");
            TheSeries.Add(1, 201478304, "OpOpOpOpOpOpOpOp...");
            TheSeries.Add(2, 184443667, "OpOpOpOpOpOpOpOp...");
            TheSeries.Add(3, 177618980, "OpOpOpOpOpOpOpOpOp...");
            TheSeries.Add(4, 113353935, "OpOpOpOpOpOpOp");
            TheSeries.Add(5, 93689069, "OpOpOpOpOpOpOpOp...");
            TheSeries.Add(6, 51526793, "OpOpOp");
            TheSeries.Add(7, 28238498, "OpOpOp");
            TheSeries.Add(8, 16809770, "OpOpO");

You should see plenty of overlap. Here is another screen shot using the "Op" code change above:

OpOverlapping1.PNG (8.46 KiB) Viewed 22254 times

[Christopher]

Even during your video you display the issue. Here is a stopping point where there is an issue at 0:15 and 0:23 of the video. I see several other places during the video which also have the same problem.

With all due respect, I'm afraid I can't see any overlapping in that image.

You did not address the second issue with a separation of "1" giving such a large label separation.

The separation is not calculated for labels which are point labels (the third String parameter of the Series.Add overload you use) and was designed principally for labels which are text representations of the axis values. At least this is how the source code differentiates the two cases.

Should I open another forum thread for that issue and not place two problems in the same thread?

Possibly the most ideal way for you to report issues to us is using our issue-tracking software, which is open to all Steema clients - the URL is http://bugs.teechart.net/ and you should be able to log in via the New Account menu. Clearly here each ticket should represent a single issue.

[Christopher]

You should see plenty of overlap. Here is another screen shot using the "Op" code change above:

OpOverlapping1.PNG

Ah yes, here the overlap is clear, thank you.

[biqpaulson]

You did not address the second issue with a separation of "1" giving such a large label separation.

The separation is not calculated for labels which are point labels (the third String parameter of the Series.Add overload you use) and was designed principally for labels which are text representations of the axis values. At least this is how the source code differentiates the two cases.

Should I open another forum thread for that issue and not place two problems in the same thread?

Possibly the most ideal way for you to report issues to us is using our issue-tracking software, which is open to all Steema clients - the URL is http://bugs.teechart.net/ and you should be able to log in via the New Account menu. Clearly here each ticket should represent a single issue.

[/quote]

Is there a work around I can use for this problem? If not I will enter it as a bug in bugzilla.

[Christopher]

Is there a work around I can use for this problem? If not I will enter it as a bug in bugzilla.

Generally the workaround would be to draw custom labels - you might like to investigate this area with reference to these three posts [one, two, three].

[biqpaulson]

This helps a little but still get cruched together.

Is there a way to know how many pixels there are between grid lines (or between label ticks or even the labels themselves)?

[biqpaulson]

Nevermind the last question. I was able to figure it out.

Code: Select all

Chart.Axes.Bottom.IAxisSize

works fine.

I have another question. I have been trying all the examples but none of them work for a
Series - Steema.TeeChart.Styles.Bar
MultiBar - Steema.TeeChart.Styles.MultiBars.SideAll

Is there a way to do Items.Add into the second set of stacks? Presently, everything always go into the first set of stacks since:

Code: Select all

Chart.Axes.Bottom.Labels.Items.Add(value, text)

has multiple positions in the SideAll charts. and all the .Labels.Items actions seem to only work on the first series.

So it ends up looking like:

SideAllCapture.PNG (38.24 KiB) Viewed 22228 times

Which, obviously, does not work at all.

[Christopher]

Hello Matt,

The following code:

Code: Select all

    private void InitializeChart()
    {
      Random rnd = new Random();
      int count = 0;

      for (int i = 1; i < 4; i++)
      {
        Bar bar = new Bar(tChart1.Chart);
        bar.MultiBar = MultiBars.SideAll;

        for (int j = 0; j < 3; j++)
        {
          bar.Add(rnd.Next(100));

          tChart1.Axes.Bottom.Labels.Items.Add(count, "Number" + count.ToString());
          count++;
        }
      }

      tChart1.Axes.Bottom.Labels.Angle = 90;
    }

gives me this:

TChart636275911123602881.png (13.48 KiB) Viewed 22212 times

Is this more along the lines of what you would expect?

[biqpaulson]

Works great!

I did not know you could just use an increment for each label.

Thanks.