custom AxisLabels overlap

[Werner Kratochwil]

Well, actually I am already working with GetAxisLabel

but still
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Count is zero.

If I do
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Add(300);

all regular Labels disappear.
and
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Count in GetAxisLabel is one, so no regular labels to work with.

Is there a different way of accessing the regular labels in GetAxisLabel.
Do you have a sample for this? Or is there one in the Feature demo ( now that is finally works on my machine )

Regards,
Werner

[Narcís]

Hi Werner,

Do I have to add a costum label to use GetAxisLabels?

No, this event is fired when using standard labels.

I have tested both with IE and Firefox and some features have problems in the Firefox: Zooming and the Linebreak in Modify standard mark text.

Yes, we are aware of FireFox problems and we will try to solve them.

Well it does not work for me. And I could not change or see the e-mail-adress the notification should be sent to.
If I click on "Your Account" I only have the option to Logout. Which e-mail adress is used for my account's notification?

It's strange. It worked fine again for me. The notification seems to be sent to the contact e-mail address we have on our records for who purchased the license. If you want I can set it to your e-mail address account.

but still
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Count is zero.

Yes, this property is only for custom labels.

If I do
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Add(300);

all regular Labels disappear.
and
WebChartProdukt.Chart.Axes.Bottom.Labels.Items.Count in GetAxisLabel is one, so no regular labels to work with.

Yes, this also as designed, when using custom labels standard labels are no longer available.

Is there a different way of accessing the regular labels in GetAxisLabel.
Do you have a sample for this? Or is there one in the Feature demo ( now that is finally works on my machine )

Yes, there's an example for that at the features demo, just search for "GetAxisLabel".

[glikoz]

JohnK's Message was very helpful ..

This may be a little late but here is the code I used on my custom labels to control overlap. I've only implemented the horizontal so far but the vertical would be similar.

Code:

private void axis_GetAxisDrawLabel(object sender, GetAxisDrawLabelEventArgs e)
{

//flags indicating overlap with the previous and next labels.
bool overlapPrv = false;
bool overlapNxt = false;

//Get the axis
Steema.TeeChart.Axis axis = (Steema.TeeChart.Axis)sender;

//get the size of the label text
SizeF currentSize = this.graphics.MeasureString(e.Text, axis.Labels.Font.DrawingFont);
Rectangle currentRect = new Rectangle(e.X, e.Y, (int)currentSize.Width, (int)currentSize.Height);

//graphAxisLabels is a local ArrayList of the custom labels.
//this is needed to get the index value of the label in the array.
int index = this.graphAxisLabels.IndexOf(e.Text);
//if first or last label set e.DrawLabel to true and return.
if(index <= 0 || index >= axis.Labels.Items.Count - 1)
{
e.DrawLabel = true;
return;
}

//get the AxisLabelItem we are trying to draw.
Steema.TeeChart.AxisLabelItem currentLabel = axis.Labels.Items[index];

//if we set visible to false before GetAxisDrawLabel then set e.DrawLabel to false;
if(currentLabel.Visible == false)
e.DrawLabel = false;

//Get the previous and next labels.
Steema.TeeChart.AxisLabelItem prev = axis.Labels.Items[index - 1];
Steema.TeeChart.AxisLabelItem next = axis.Labels.Items[index + 1];

//if this axis is horizontal then the concern is the width of the label.
//TODO implementation for the vertical.
if(axis.Horizontal == true)
{
//if previous is visible we need to see if it will overlap with the current.
if(prev.Visible == true)
{
//get the previous labels text size.
SizeF prevSize = this.graphics.MeasureString(prev.Text, this.chartFont.DrawingFont);
//get the previous label rectangle.
Rectangle prvRect = new Rectangle(
axis.CalcXPosValue(prev.Value), e.Y, (int)prevSize.Width, (int)prevSize.Height);
//set the overlapPrv flag by checking IntersectsWith
overlapPrv = currentRect.IntersectsWith(prvRect);
}
//Check next label
if(next.Visible == true)
{
//get next label text size.
SizeF nextSize = this.graphics.MeasureString(next.Text, axis.Labels.Font.DrawingFont);
//get next label rectangle.
Rectangle nxtRect = new Rectangle(
axis.CalcXPosValue(next.Value), e.Y, (int)nextSize.Width, (int)nextSize.Height);
//set overlapNxt flag by checking IntersectsWith
overlapNxt = currentRect.IntersectsWith(nxtRect);
}


//if any overlap or if e.DrawLabel is false set e.DrawLabel to false.
if(overlapPrv || overlapNxt || e.DrawLabel == false)
e.DrawLabel = false;
}


}

There are some changes because of version ..

Code: Select all

//flags indicating overlap with the previous and next labels.          
            bool overlapPrv = false;
            bool overlapNxt = false;

            //Get the axis 
            Steema.TeeChart.Axis axis = (Steema.TeeChart.Axis)sender;

            //get the size of the label text 
            SizeF currentSize = this.Graphics3D.MeasureString(axis.Labels.Font,e.Text);
            Rectangle currentRect = new Rectangle(e.X, e.Y, (int)currentSize.Width, (int)currentSize.Height);

            //graphAxisLabels is a local ArrayList of the custom labels. 
            //this is needed to get the index value of the label in the array.       
            
            int index = IndexOfLabel(axis,e.Text);//My custom function 
            //if first or last label set e.DrawLabel to true and return. 
            if (index <= 0 || index >= axis.Labels.Items.Count - 1)
            {
                e.DrawLabel = true;
                return;
            }

            //get the AxisLabelItem we are trying to draw. 
            Steema.TeeChart.AxisLabelItem currentLabel = axis.Labels.Items[index];

            //if we set visible to false before GetAxisDrawLabel then set e.DrawLabel to false; 
            if (currentLabel.Visible == false)
                e.DrawLabel = false;

            //Get the previous and next labels. 
            Steema.TeeChart.AxisLabelItem prev = axis.Labels.Items[index - 1];
            Steema.TeeChart.AxisLabelItem next = axis.Labels.Items[index + 1];

            //if this axis is horizontal then the concern is the width of the label.  
            //TODO implementation for the vertical. 
            if (axis.Horizontal == true)
            {
                //if previous is visible we need to see if it will overlap with the current. 
                if (prev.Visible == true)
                {
                    //get the previous labels text size. 
                    SizeF prevSize = this.Graphics3D.MeasureString(axis.Labels.Font, prev.Text);
                    //get the previous label rectangle. 
                    Rectangle prvRect = new Rectangle(
                       axis.CalcXPosValue(prev.Value), e.Y, (int)prevSize.Width, (int)prevSize.Height);
                    //set the overlapPrv flag by checking IntersectsWith 
                    overlapPrv = currentRect.IntersectsWith(prvRect);
                }
                //Check next label 
                if (next.Visible == true)
                {
                    //get next label text size. 
                    SizeF nextSize = this.Graphics3D.MeasureString(axis.Labels.Font,next.Text);
                    //get next label rectangle. 
                    Rectangle nxtRect = new Rectangle(
                       axis.CalcXPosValue(next.Value), e.Y, (int)nextSize.Width, (int)nextSize.Height);
                    //set overlapNxt flag by checking IntersectsWith 
                    overlapNxt = currentRect.IntersectsWith(nxtRect);
                }


                //if any overlap or if e.DrawLabel is false set e.DrawLabel to false. 
                if (overlapPrv || overlapNxt || e.DrawLabel == false)
                    e.DrawLabel = false;
            } 

But,still there is a little problem ..
On Axis_GetAxisDrawLabel we couldnt access CustomAxisLabel ..
Is there any possibility to pass CustomAxisLabels (not it's text) to event handler..Because I have diffrent CustomAxisLabels with same Texts!
(1998-Nov-Dec-1999-Feb-........-Nov-Dec)
Or what can we do for this problem ?

[Narcís]

Hi glikoz,

Yes, you can access them by using something like:

Code: Select all

         Steema.TeeChart.AxisLabelItem CurrentLabel, PreviousLabel;    
         for (int i=1; i<tChart1.Axes.Left.Labels.Items.Count; ++i) 
         { 
            CurrentLabel = tChart1.Axes.Left.Labels.Items[i]; 
            PreviousLabel = tChart1.Axes.Left.Labels.Items[i-1]; 

            tChart1.Header.Text=tChart1.Header.Text+" "+CurrentLabel.Top.ToString(); 

            if (CurrentLabel.Top+CurrentLabel.Height == PreviousLabel.Top) 
            { 
               CurrentLabel.Visible=false; 
            } 
         } 

[Werner]

Hi!

I've found a way to check for overlapping labels with WebChartProdukt_GetBottomAxisDrawLabel.

Now, I'd like to call a function to repaint the whole webchart in case I find overlapping labels.

I am using version 2.

Right now I am doing
Bitmap bmp = WebChartProdukt.Chart.Bitmap();

before checking for overlapping labels. But it is rather slow.

What function could I use inside WebChartProdukt_GetBottomAxisDrawLabel?

Regards
Werner

[Christopher]

Hello,

An alternative to using the Bitmap method to ensure the chart has been fully painted is to move your code to the AfterDraw event, although this may mean having to make a call to Invalidate within this event which would necessitate the use of a boolean flag to avoid a recursive loop.

Have you tried using the Bitmap method having built your project in Release rather than Debug mode? Running projects in Debug mode does negatively impact performance.

[Werner]

Hi Christopher!

I am glad you are back! This makes debugging straight forward again.

Good idea with Release mode, but using Bitmap in Release mode is still slow.

I've tried with AfterDraw, but
WebChartProdukt.Chart.Invalidate();
does not redraw the graphic.
Do I have to use Draw instead?

Regards
Werner

[Christopher]

Hello Werner,

Thank you, that's very kind of you!

Drawing the chart twice, once automatically and again using the Bitmap() method is going to make your chart twice as slow to appear.

Given that you seem to have already developed an algorithm for placing marks, you might like to consider the idea of not using Series.Marks at all and using AnnotationTools positioned using a slightly modified version of your algorithm. This may save you having to repaint the chart twice.

What happens, exactly, when you run your code in the AfterDraw event? Are the changes not reflected on the chart?

[Werner]

Hi Christopher!

When I do Invalidate nothing happens.
What I want to do is:
Check for overlapping labels, and if there are any, turn the labels with this:

Code: Select all

WebChartProdukt.Chart.Axes.Bottom.Labels.Angle = 90;

and then redraw the whole thing.
If I do

Code: Select all

WebChartProdukt.Chart.Axes.Bottom.Labels.Draw(true)

the labels get drawn again, but I need the whole graphic to be redrawn.

I can't use

Code: Select all

WebChartProdukt.Chart.Draw

because I don't know how to get to Graphics g.

If there is a lot of trying involved, I'd rather stick with the labels. If it's very easy and you would give me a sample, I could try with AnnotationTools.

Regards
Werner

[Narcís]

Hi Werner,

I can't use
Code:
WebChartProdukt.Chart.Draw

because I don't know how to get to Graphics g.

Have you tried using Invalidate?

Code: Select all

         WebChartProdukt.Chart.Invalidate();

If there is a lot of trying involved, I'd rather stick with the labels. If it's very easy and you would give me a sample, I could try with AnnotationTools.

Here you have an example using annotation tools.

[Werner]

Hi Narcis!

Have you tried using Invalidate?

I have - have you?

Read my previous posts before writing, PLEASE

Or get Christopher back to the forum, because he does.


Thanks for the annotation sample, looks too much work for me.
I'd rather find a way to repaint the graph before trying with this.
Any ideas for a repaint, anyone?

Werner

[Narcís]

Hi Werner,

Sorry for not having read your previous messages carefully enough. We will try to arrange an example without having the chart being repainted.

[Narcís]

Hi Werner,

Find below an example on how to achieve what you requested. Please notice that to get it working you'll have to first run your application to obtain Axis.IAxisSize according to your chart dimensions and then use Axis.IAxisSize value as a constant, as commented in the example.

Code: Select all

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

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

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

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

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

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

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

	//there are other ways of calculating this, that is, finding the longest label first and using that as the 'valuelength'
	private int CalcValueIndex(double AxisLength, double ValueLength)
	{
		int result = 0;
		double tmp = IAxisLength - AxisLength;
		tmp = tmp / ValueLength;
		result = Steema.TeeChart.Utils.Round(tmp);
		result++;

		return result;
	}

	//Here's the trick, a pre-calculated Axis.IAxisSize, run the example and check the Axis.IAxisSize once it's drawn. 
	private const double IAxisLength = 368; 

	private Steema.TeeChart.AxisLabelsItems ModifyCustomLabels(Steema.TeeChart.AxisLabelsItems OldLabels, double MinVal, double MaxVal)
	{
		double range = MaxVal - MinVal;
		double axislength = IAxisLength;
		//double valuelength = axislength / range;
		double valuelength = axislength / OldLabels.Count; //If there's not one label for each X value
		int index = 0;

		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;
		Steema.TeeChart.AxisLabelsItems result = new Steema.TeeChart.AxisLabelsItems(ch1.Axes.Bottom);

		while (axislength >= valuelength)
		{
			index = CalcValueIndex(axislength, valuelength);

			if (index < OldLabels.Count)
			{
				result.Add(OldLabels[index]);
				axislength -= (g.TextWidth(OldLabels[index].Text) + 1);
			}
			else
			{
				break;
			}
		}

		result.Add(OldLabels[OldLabels.Count - 1]); //add last label if necessary

		return result;
	}

	private bool VerticalCustomLabels(Steema.TeeChart.AxisLabelsItems OldLabels, double MinVal, double MaxVal)
	{
		double range = MaxVal - MinVal;
		double axislength = IAxisLength;
		double valuelength = axislength / OldLabels.Count;
		int index = 0;

		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;
		int tmp=0;
		bool result = false;

		while (axislength >= valuelength)
		{
			index = CalcValueIndex(axislength, valuelength);

			if (index > tmp + 1)
			{
				result = true;
				break;
			}
			else
			{
				if (index < OldLabels.Count)
				{
					axislength -= (g.TextWidth(OldLabels[index].Text) + 1);
					tmp = index;
				}
				else
				{
					break;
				}
			}

		}

		return result;
	}

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

		//Comment out this code and comment in the if below to calculate labels fitted in the axis
		//Steema.TeeChart.AxisLabelsItems tmp = ModifyCustomLabels(origLabels, line.XValues.Minimum, line.XValues.Maximum);
		//ch1.Axes.Bottom.Labels.Items.Clear();

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

		if (VerticalCustomLabels(origLabels, line.XValues.Minimum, line.XValues.Maximum))
		{
			ch1.Axes.Bottom.Labels.Angle = 90;
		}
		else
		{
			ch1.Axes.Bottom.Labels.Angle = 0;
		}

	}

[Werner]

Hi Narcis!

Thanks for the example.
Took me quite long to understand your approach.

Is there a way to calculate IAxisSize every time?
The size of my WebChart is adapted to the window size.

Regards
Werner

[Narcís]

Hi Werner,

You have 2 options:

1) Draw the parts of the chart that are necessary to calculate IAxisSize. Below there's an example with IAxisSize calculated in the BeforeDrawAxes event, which is the earliest event in which IAxisSize has a valid value.

2) Create a small collection of different chart sizes and their IAxisSize before releasing the application and use them.

Code: Select all

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

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

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

		WebChart1.Width = 492;
		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]);
		}

		//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;
	}

	//there are other ways of calculating this, that is, finding the longest label first and using that as the 'valuelength'
	private int CalcValueIndex(double AxisLength, double ValueLength)
	{
		int result = 0;
		double tmp = IAxisLength - AxisLength;
		tmp = tmp / ValueLength;
		result = Steema.TeeChart.Utils.Round(tmp);
		result++;

		return result;
	}

	//Here's the trick, a pre-calculated Axis.IAxisSize, run the example and check the Axis.IAxisSize once it's drawn. 
	//private const double IAxisLength = 368; 
	private double IAxisLength; 

	private Steema.TeeChart.AxisLabelsItems ModifyCustomLabels(Steema.TeeChart.AxisLabelsItems OldLabels, double MinVal, double MaxVal)
	{
		double range = MaxVal - MinVal;
		double axislength = IAxisLength;
		//double valuelength = axislength / range;
		double valuelength = axislength / OldLabels.Count; //If there's not one label for each X value
		int index = 0;

		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;
		Steema.TeeChart.AxisLabelsItems result = new Steema.TeeChart.AxisLabelsItems(ch1.Axes.Bottom);

		while (axislength >= valuelength)
		{
			index = CalcValueIndex(axislength, valuelength);

			if (index < OldLabels.Count)
			{
				result.Add(OldLabels[index]);
				axislength -= (g.TextWidth(OldLabels[index].Text) + 1);
			}
			else
			{
				break;
			}
		}

		result.Add(OldLabels[OldLabels.Count - 1]); //add last label if necessary

		return result;
	}

	private bool VerticalCustomLabels(Steema.TeeChart.AxisLabelsItems OldLabels, double MinVal, double MaxVal)
	{
		double range = MaxVal - MinVal;
		double axislength = IAxisLength;
		double valuelength = axislength / OldLabels.Count;
		int index = 0;

		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		Steema.TeeChart.Drawing.Graphics3D g = ch1.Graphics3D;
		int tmp=0;
		bool result = false;

		while (axislength >= valuelength)
		{
			index = CalcValueIndex(axislength, valuelength);

			if (index > tmp + 1)
			{
				result = true;
				ch1.Panel.MarginUnits = Steema.TeeChart.PanelMarginUnits.Pixels;
				ch1.Panel.MarginBottom = valuelength;
				break;
			}
			else
			{
				if (index < OldLabels.Count)
				{
					axislength -= (g.TextWidth(OldLabels[index].Text) + 1);
					tmp = index;
				}
				else
				{
					break;
				}
			}

		}

		return result;
	}

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

		//Comment out this code and comment in the if below to calculate labels fitted in the axis
		//Steema.TeeChart.AxisLabelsItems tmp = ModifyCustomLabels(origLabels, line.XValues.Minimum, line.XValues.Maximum);
		//ch1.Axes.Bottom.Labels.Items.Clear();

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

		if (VerticalCustomLabels(origLabels, line.XValues.Minimum, line.XValues.Maximum))
		{
			ch1.Axes.Bottom.Labels.Angle = 90;
		}
		else
		{
			ch1.Axes.Bottom.Labels.Angle = 0;
		}

	}

	protected void WebChart1_BeforeDrawAxes(object sender, Steema.TeeChart.Drawing.Graphics3D g)
	{
		IAxisLength = WebChart1.Chart.Axes.Bottom.IAxisSize;
		ResetLabels();
	}