Page 1 of 1

how to show the merged X axes?

Posted: Mon Nov 06, 2023 4:11 pm
by 15695007
I hope to use the dataset with:

Code: Select all

[
	{year: 2021, wid: 'A',total: 10},
	{year: 2021, wid: 'B',total: 20},
	{year: 2021, wid: 'C',total: 20},
	{year: 2021, wid: 'D',total: 20},
	{year: 2022, wid: 'E',total: 10},
	{year: 2022, wid: 'F',total: 10},
	{year: 2022, wid: 'A',total: 20},
	{year: 2023, wid: 'S',total: 10},
	{year: 2023, wid: 'T',total: 20},
	{year: 2023, wid: 'H',total: 20},
	{year: 2023, wid: 'N',total: 10}
]

then the chart will show like:


Snipaste_2023-11-07_00-07-23.png
Snipaste_2023-11-07_00-07-23.png (9.66 KiB) Viewed 26410 times
the element 1-4 with the same year 2021,then i want to show once below the wid,
the element 5-8 with the same year 2022, then the year ‘2022 ’ show below the three wid value
...

when i has the same value,then show with sub axes below the origin x label

how need i to to?

Re: how to show the merged X axes?

Posted: Tue Nov 07, 2023 2:43 pm
by Marc
Hello,

The points appear to be a continuous sequence. If you wish to fix the order then the easiest way might be to add an index to each point: 0,1,2..etc and use the year as a label, not as an X value.

Regards,
Marc Meumann

Re: how to show the merged X axes?

Posted: Tue Nov 07, 2023 4:07 pm
by 15695007
Hi
My trouble is how to set the X label, but point order.

I can add the index to dataset .

I hope the point x label can show
2021, A
2021, B

but, the A,B maybe is long,then I hope samplify the x label, with merge same label, like A,B,C,D with 2021 year. then I can show one time with subplot .the chart X will show like:
Snipaste_2023-11-08_00-06-27.png
Snipaste_2023-11-08_00-06-27.png (3.08 KiB) Viewed 26141 times

Re: how to show the merged X axes?

Posted: Tue Nov 07, 2023 6:55 pm
by Marc
Hello,

Perhaps I'm not understanding the question well so I'll answer different aspects in the way I see them.

An index on the data would give you the exact chart you want without the year labels:

ie.

Code: Select all

int[] idx = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
int[] year = { 2021, 2021, 2021, 2021, 2022, 2022, 2022, 2023, 2023, 2023, 2023 };
string[] label = { "A", "B", "C", "D", "E", "F", "A", "S", "T", "H", "N" };
double[] total = { 10, 20, 20, 20, 10, 10, 20, 10, 20, 20, 10 };

private void Form1_Load(object sender, EventArgs e)
{
    //note an index (idx here) is not required for this add overload as it is automatically added, but it 
    //helps to include it for clarity/understanding.
    for (int i = 0; i < 11; i++)
    {
        points1.Add(total[i], label[i]);

        //or
        //points1.Add(idx[i], total[i], label[i]);
    }

    tChart1.Axes.Left.SetMinMax(0, 50);
}
You can add the year to the label in this way, via the OnGetAxisLabel event:

Code: Select all

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)
{
    if (sender == tChart1.Axes.Bottom)
    {
        if (e.ValueIndex != -1)
            e.LabelText = e.LabelText + "\n" + year[e.ValueIndex].ToString();
    }
}
If you only want the year once, at the first value of the year for example, then you could setup the OnGetAxisLabel event in this way:

Code: Select all

int lastYear = -1;

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)
{
    if (sender == tChart1.Axes.Bottom)
    {
        if (e.ValueIndex != -1)
            if (lastYear != year[e.ValueIndex])
            {
                e.LabelText = e.LabelText + "\n      " + year[e.ValueIndex].ToString();
                lastYear = year[e.ValueIndex];
            }
    }
}
points_year.png
points_year.png (1.78 KiB) Viewed 26105 times
There are other options, including putting the year to the centre of each range, but that requires a little more work…

You could even plot the grouping symbol. Custom drawing is described here:
Custom drawing Tutorial

Regards,
Marc

Re: how to show the merged X axes?

Posted: Wed Nov 08, 2023 3:34 pm
by 15695007
Thank you for help. It's close to what I want.

I want to custom the same year symbol, like the
Snipaste_2023-11-08_23-18-37.png
Snipaste_2023-11-08_23-18-37.png (4.39 KiB) Viewed 26071 times
or
Snipaste_2023-11-08_00-06-27.png
Snipaste_2023-11-08_00-06-27.png (3.08 KiB) Viewed 26071 times
.

Then I have try to use custom Drawing url,but failed.

how to draw the specified symbol above the year value
Could you help me please!

I hope the X look like
Snipaste_2023-11-08_23-31-17.png
Snipaste_2023-11-08_23-31-17.png (8.57 KiB) Viewed 26071 times
Through this result, I can directly see that A, B, C and D have the same year 2021.

Re: how to show the merged X axes?

Posted: Thu Nov 09, 2023 8:15 am
by Marc
Hello,

Use the moveTo, lineTo Canvas methods to plot the lines you require.

Ypu can get the coordinates for each location by converting the axis location you wish for the group you decide.

ie.

Code: Select all

/*x location:*/ tChart1.Axes.Bottom.CalcXPosValue(yourPointvalue)
/*y location:*/ tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.Minimum)  
                     //gets bottom Axis location to which you can add the distance you require
/*or....*/
tChart1.Axes.Bottom.Position
Use the OnAfterDraw event for the custom drawing code.

Example of moveTo, LineTo from the tutorial I linked (this plots a diagonal line across the Chart:

Code: Select all

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) { 
        Point s = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position); 
        Point e = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position); 
        g.MoveTo(s); 
        g.LineTo(e,0); 
} 
You can add the Year text in this way too, using the Canvas textOut method.

Example from tutorial:

Code: Select all

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) { 
        string text = "My Text"; 
        Size s = new Size(150, 50); 
        Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2)); 
        Rectangle r = new Rectangle(p,s); 
        g.Pen.Color = Color.Blue; 
        g.Rectangle(r); 
 
        g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(text)/2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(text)/2)), text); 
}
If you can't access the custom drawing tutorial page I linked (I assume you can as you can access this forum page) there is an offline version here you can download:
https://www.steema.com/files/public/tee ... neDocs.zip

There's some work to write a calculation of the x and y locations of the points for each range, I'm not going to do that here as it requires more time than I have available right now; it's a question of deciding a system to group/set the point ranges and returning min-max points for the range for which to plot the lines. Once the rule is decided it can be applied generically for all cases.

Regards,
Marc Meumann

Re: how to show the merged X axes?

Posted: Thu Nov 09, 2023 8:43 am
by Marc
An extra note, To make room for the extra content you wish to plot, increase the Chart's bottom margin.

For example:

Code: Select all

tChart1.Panel.MarginUnits = PanelMarginUnits.Pixels;
tChart1.Panel.MarginBottom = 80;

Re: how to show the merged X axes?

Posted: Thu Nov 09, 2023 9:25 am
by 15695007
OK,I have draw the sample line.
But i have the next trouble is how to resize the chart canvas that can leave the space to draw my custom symbol.
Snipaste_2023-11-09_17-09-55.png
Snipaste_2023-11-09_17-09-55.png (25.37 KiB) Viewed 26029 times
I want to stretch vertical direction, and the chart Bottom can't change. like the red rectangle.
thus i have the spce to show my custom symbol.


And next question is, which function do i use to calc Y value?

I have use tChart1.Axes.Bottom.CalcYPosValue(0) eg.. but i can‘t see the point,I know it‘s exceed the canvas, so i want to know which one i should use to calculate the point Y value。
I think the fixed value like the 10 / 20 , to add the base value(tChart1.Axes.Bottom.Position) will cause the code ugly.

Re: how to show the merged X axes?

Posted: Thu Nov 09, 2023 10:01 am
by Marc
Hello,

Re.
I want to stretch vertical direction
See my last answer about Margins.

Re.
I have use tChart1.Axes.Bottom.CalcYPosValue(0) eg.. but i can‘t see the point
A point is a combination of X and Y

ie. tChart1.Axes.Bottom.CalcXPosValue(0), tChart1.Axes.Bottom.CalcYPosValue(0)

Substitute that into the last example I sent you to test it.

Code: Select all

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) { 
        Point s = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position); 
        Point e = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position); 
        g.MoveTo(s); 
        g.LineTo(e,0); 
} 
ie. test it, try for co-ordinates:

Code: Select all

Point s = new Point(Axes.Bottom.CalcXPosValue(0), Axes.Bottom.CalcYPosValue(12));
Point e = new Point(Axes.Bottom.CalcXPosValue(5), Axes.Bottom.CalcYPosValue(20)); 
if you wish to work using point index then use this example as a guide:

Code: Select all

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
    Point p5 = new Point(points1.CalcXPos(0), points1.CalcYPos(0));
    Point p15 = new Point(points1.CalcXPos(6), points1.CalcYPos(6));
    g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle;
    g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;
    g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
    g.Pen.Transparency = 70;
    g.Pen.Width = 3;
    g.Pen.Color = Color.BlueViolet;
    g.MoveTo(p5);
    g.LineTo(p15, 0);
}
These examples are in the tutorial.

To apply to values below the axis, calculate the axis y and add fixed displacements of your choice.

Regards,
Marc Meumann

Re: how to show the merged X axes?

Posted: Fri Nov 10, 2023 5:22 am
by 15695007
Ok, thank you for help.

When i use the margin, i faced the new problem.

The normal image is :
normal.png
normal.png (22.28 KiB) Viewed 25966 times

if the x label is long ,then i set the angle to 90 caues the result
覆盖.png
覆盖.png (24.48 KiB) Viewed 25966 times
i use the code:

tChart1.Axes.Bottom.Position + symbolBase to calc the custom symbol y position.

The x label is dynamical.
So i want to know how to get the standard calc function to get the point Y value then they can't overlap each other

Re: how to show the merged X axes?

Posted: Tue Nov 14, 2023 11:56 am
by Marc
Hello,

Here's an example how to dynamically modify the location of output relative to Axis Label angle. This example outputs a small test text sample.

Code: Select all

  //declare var for max label width (length)
  double maxLabelWidth = 0;

  //then in Form_load or data refresh set:
  maxLabelWidth = tChart1.Axes.Bottom.MaxLabelsWidth();

  //will use radians for angle calcs
  public double ConvertToRadians(double angle)
  {
    return (Math.PI / 180) * angle;
  }

  //this example outputs test text in OnAfterDraw
  private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
  {
    double hyp = maxLabelWidth;
    
    //some simple trig:
    //sin(@) = opp/hyp
    //yDisp = opp  therefore  = hyp * sin(@) 

    double angleRad = ConvertToRadians(tChart1.Axes.Bottom.Labels.Angle);
    double yDisp = tChart1.Axes.Bottom.Labels.Height; //minimum

    if ((tChart1.Axes.Bottom.Labels.Angle >= 0) && (tChart1.Axes.Bottom.Labels.Angle < 180))
      yDisp = yDisp + Math.Sin(angleRad) * maxLabelWidth;
    else
      yDisp = yDisp + Math.Sin(angleRad) * maxLabelWidth * -1;

    g.TextOut(10, (int)(tChart1.Axes.Bottom.Position + yDisp), "test label");

  }
Regards,
Marc Meumann