custom AxisLabels overlap

Werner · Post by **Werner** » Mon Jan 08, 2007 9:09 am

Hi Narcis!

At first the sample did not work. Should have mentioned that I had to add the BeforeDrawAxes event.

Well, I managed to find that out myself.
Nice idea, Narcis!

I picked up your idea and simplified the code - I assume you wrote it quick and dirty

OK, here is my version, which I hope is a little easier to read and understand.
I hope it is of interest for someone

Code: Select all

protected Steema.TeeChart.Web.WebChart WebChart1;

protected void Page_Load(object sender, EventArgs e)
{
	WebChart1.BeforeDrawAxes +=new Steema.TeeChart.PaintChartEventHandler(WebChart1_BeforeDrawAxes);
	InitializeChart();
}

private Steema.TeeChart.Styles.Line line;
private Steema.TeeChart.AxisLabelsItems origLabels;

private void InitializeChart()
{
	Steema.TeeChart.Chart ch1 = WebChart1.Chart;

	WebChart1.Width = 400;
	WebChart1.Height = 385;
	ch1.Series.Add(line = new Steema.TeeChart.Styles.Line());
	line.FillSampleValues();

	ch1.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
	ch1.Panel.MarginBottom = 30;

	origLabels = CreateCustomLabels(line.XValues.Minimum, line.XValues.Maximum);

	for (int i = 0; i < origLabels.Count; i++)
	{
		ch1.Axes.Bottom.Labels.Items.Add(origLabels[i]);
	}
}

private Steema.TeeChart.AxisLabelsItems CreateCustomLabels(double MinVal, double MaxVal)
{
	Steema.TeeChart.AxisLabelsItems result = new Steema.TeeChart.AxisLabelsItems(WebChart1.Chart.Axes.Bottom);
	Steema.TeeChart.AxisLabelItem label;

	Char c;
	int count = 0;

	for (double i = MinVal; i < MaxVal; i++)
	{
		label = new Steema.TeeChart.AxisLabelItem(WebChart1.Chart);
		label.Value = i;
		c = Convert.ToChar(65 + count);
		label.Text = "label" + c.ToString();
		label.Transparent = true;
		++count;
		result.Add(label);
	}

	return result;
}

private bool LabelsTooLong(Steema.TeeChart.AxisLabelsItems OldLabels)
{
        bool tooLong = false;
	if (OldLabels.Count > 0)
	{
		double axisLen = WebChart1.Chart.Axes.Bottom.IAxisSize;
		double valueLen = axisLen / OldLabels.Count;
		double maxValueLen = 0;

		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;

		double axisPos = 0;

		for (int i=0;i<OldLabels.Count;i++)
		{
			valueLen = g.TextWidth(OldLabels[i].Text);
			if (axisPos + valueLen > axisLen)
				tooLong = true;
			axisPos += valueLen;
			if (valueLen > maxValueLen)
				maxValueLen = valueLen;
		}

                if (tooLong)
               {
		        ch1.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
		        ch1.Panel.MarginBottom = maxValueLen;
                }
	}
	return tooLong;

}


private void ResetLabels()
{
	Steema.TeeChart.Chart ch1 = WebChart1.Chart;

	if (LabelsTooLong(origLabels))
	{
		ch1.Axes.Bottom.Labels.Angle = 90;
	}
	else
	{
		ch1.Axes.Bottom.Labels.Angle = 0;
	}

}

protected void WebChart1_BeforeDrawAxes(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
	ResetLabels();
}

Regards,
Werner

Werner · Post by **Werner** » Mon Jan 08, 2007 10:49 am

Hi!

I adapted the sample into my web app.

But if the labels are turned, they are clipped at the bottom.
I thought MarginBottom would solve this issue, but it does not or cannot be changed at that moment.
Please give me instructions on how to increase the margin at that point.

Thanks for the help.

Werner

Narcís · Post by **Narcís** » Thu Jan 11, 2007 4:46 pm

Hi Werner,

Yes, you are right. After much testing, we found that the way to achieve bottom margin automatically set is calling ResetLabels() method at GetAxisLabel event as shown here:

Code: Select all

	protected void Page_Load(object sender, EventArgs e)
	{
		InitializeChart();
	}

	private void InitializeChart()
	{
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;

		WebChart1.Width = 400;
		WebChart1.Height = 385;
		Steema.TeeChart.Styles.Line line = new Steema.TeeChart.Styles.Line(ch1);
		line.FillSampleValues();

		Steema.TeeChart.AxisLabelsItems origLabels = CreateCustomLabels(line.XValues.Minimum, line.XValues.Maximum);

		for (int i = 0; i < origLabels.Count; i++)
		{
			ch1.Axes.Bottom.Labels.Items.Add(origLabels[i]);
		}

		WebChart1.GetAxisLabel += new Steema.TeeChart.GetAxisLabelEventHandler(WebChart1_GetAxisLabel);
	}

	void WebChart1_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)
	{
		ResetLabels();
	}

	private Steema.TeeChart.AxisLabelsItems CreateCustomLabels(double MinVal, double MaxVal)
	{
		Steema.TeeChart.AxisLabelsItems result = new Steema.TeeChart.AxisLabelsItems(WebChart1.Chart.Axes.Bottom);
		Steema.TeeChart.AxisLabelItem label;

		Char c;
		int count = 0;

		for (double i = MinVal; i < MaxVal; i++)
		{
			label = new Steema.TeeChart.AxisLabelItem(WebChart1.Chart);
			label.Value = i;
			c = Convert.ToChar(65 + count);
			label.Text = "label" + c.ToString();
			label.Transparent = true;
			++count;
			result.Add(label);
		}

		return result;
	}

	private bool LabelsTooLong(Steema.TeeChart.AxisLabelsItems OldLabels)
	{
		bool tooLong = false;
		if (OldLabels.Count > 0)
		{
			double axisLen = WebChart1.Chart.Axes.Bottom.IAxisSize;
			double valueLen = axisLen / OldLabels.Count;
			double maxValueLen = 0;

			Steema.TeeChart.Chart ch1 = WebChart1.Chart;
			Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;

			double axisPos = 0;

			for (int i = 0; i < OldLabels.Count; i++)
			{
				valueLen = g.TextWidth(OldLabels[i].Text);
				if (axisPos + valueLen > axisLen)
					tooLong = true;
				axisPos += valueLen;
				if (valueLen > maxValueLen)
					maxValueLen = valueLen;
			}
		}

		return tooLong;
	}

	private void ResetLabels()
	{
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;

		if (LabelsTooLong(WebChart1.Chart.Axes.Bottom.Labels.Items))
		{
			ch1.Axes.Bottom.Labels.Angle = 90;
		}
		else
		{
			ch1.Axes.Bottom.Labels.Angle = 0;
		}
	}

Werner · Post by **Werner** » Thu Jan 11, 2007 5:49 pm

Hi Narcis!

Thanks for testing.
Sorry, but it does not always work. I'll post a sample to the attachments, where you can see.
If the labels almost fit in, the labels are clipped again.

Can you reproduce this?

Regards
Werner

Narcís · Post by **Narcís** » Thu Jan 11, 2007 5:55 pm

Hi Werner,

In the newsgroups you say that you are using BeforeDrawAxes event. Please notice that my last example, and the key to solve this issue is using GetAxisLabel event. Are you using GetAxisLabel event? Have you tried running the example I posted? Does it work at your end?

Thanks in advance.

Werner · Post by **Werner** » Thu Jan 11, 2007 6:10 pm

Hi Narcis!

Sorry, I just copied the wrong text.
Yes, I used GetAxisLabel event and I used pretty much the same code as you did.

In my sample the size of the chart changes with the window size, so I can easily play around.
When I get to the point where it could change direction to horizontal, I get the clipping problem again.
Otherwise it works perfectly, so we are almost there.

Any ideas?

Regards
Werner

Narcís · Post by **Narcís** » Fri Jan 12, 2007 11:33 am

Hi Werner,

When I get to the point where it could change direction to horizontal, I get the clipping problem again.

I don't understand what do you exactly mean with this. Could you please send us a simple example project we can run "as-is" to reproduce this here?

Thanks in advance.

Werner · Post by **Werner** » Fri Jan 12, 2007 1:33 pm

Hi Narcis!

Just set the width of the last sample you posted to 1750 and watch the labels.

Code: Select all

WebChart1.Width = 1750;

Then you will see what I mean.

Regards
Werner

Narcís · Post by **Narcís** » Fri Jan 12, 2007 1:44 pm

Hi Werner,

In the last example I posted, setting the width as you mentioned, the chart is wide enough so that labels don't need to be rotated at 90 degrees and they are properly displayed. There's any other way that we can reproduce the problem here?

Thanks in advance.

Werner · Post by **Werner** » Fri Jan 12, 2007 2:00 pm

Hi Narcis!

Maybe the number of SampleValues is different
Please try with width 1820 and

Code: Select all

line.FillSampleValues(26);

Regards
Werner

Narcís · Post by **Narcís** » Fri Jan 12, 2007 2:12 pm

Hi Werner,

This also works fine here. Are you using the latest TeeChart for .NET v2 maintenance release available at the client area?

Werner · Post by **Werner** » Fri Jan 12, 2007 2:22 pm

Hi Narcis!

Interesting.

No, I have version 2.0.2469.25744.
I'll download the new version and try again.
Thanks for testing.

Regards
Werner

Werner · Post by **Werner** » Mon Jan 15, 2007 11:35 am

Hi Narcis!

The problem is still there with the new version.

I could reproduce the problem on the your sample with

Code: Select all

WebChart1.Width = 1820;
line.FillSampleValues(26);

Can you reproduce the behaviour on your side?

Regards
Werner

Narcís · Post by **Narcís** » Mon Jan 15, 2007 12:15 pm

Hi Werner,

No, I can't reproduce the problem here. I just changed the chart initialization routine to what you said and works fine here. Should I follow any specific step to reproduce it?

Narcís · Post by **Narcís** » Wed Jan 17, 2007 4:21 pm

Hi Werner,

Thanks for your project. We finally could reproduce the issue here.

We've looked at various options for checking if labels overlap. As you are already aware of, this doesn't give consistent results. We think the best option is calling Bitmap() before calling ResetLabels() method as you initially did. Our opinion is that Bitmap's call is not slower than processing overlapping labels in the events while drawing the chart.