header-text with frame / bottom axis three are

[Glenn F. Henriksen]

Hello,
I work with TeeChart 1.1.1499 and C#.
Now I have some questions.

1. How I get a header-text with a frame (with a shadow)?
2. In the bottom axis I must have three areas. Left with one bar a mean value from the last year. In the middle the current values and right one bar again.
The three areas must be separated with vertical lines between the bars.

Can you help me?
Many thanks!

Peter

[Sandra]

Hello Peter,

1. How I get a header-text with a frame (with a shadow)?

If you want change header text and puts a shadow you can use next lines of code in your application:

Code: Select all

            tChart1.Header.Font.Size = 15;
            tChart1.Header.Font.Shadow.Visible = true;
            tChart1.Header.Font.Shadow.Width = 5;

2. In the bottom axis I must have three areas. Left with one bar a mean value from the last year. In the middle the current values and right one bar again.
The three areas must be separated with vertical lines between the bars.

I make a simple example that I think solve your problem, using Custom Axis and Color Line Tool . Please check next code works fine in your application.

Code: Select all

      Steema.TeeChart.Tools.ColorLine colorline, colorline1;
        Steema.TeeChart.Styles.Bar bar;
        Steema.TeeChart.Styles.Bar bar1;
        Steema.TeeChart.Styles.Bar bar2;
        Steema.TeeChart.Axis axis1, axis2;
        
        private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            bar = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            bar2 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

            colorline = new Steema.TeeChart.Tools.ColorLine(tChart1.Chart);
            colorline1 = new Steema.TeeChart.Tools.ColorLine(tChart1.Chart);
          
         
            bar.FillSampleValues(1);
            bar1.FillSampleValues(1);
            bar2.FillSampleValues(1);


            tChart1.Header.Font.Size = 15;
            tChart1.Header.Font.Shadow.Visible = true;
            tChart1.Header.Font.Shadow.Width = 5;
       //----------------Custom Axis-------------------------------------------------------------------//

            axis1 = new Steema.TeeChart.Axis(tChart1.Chart);
            axis2 = new Steema.TeeChart.Axis(tChart1.Chart);

            tChart1.Axes.Custom.Add(axis1);
            tChart1.Axes.Custom.Add(axis2);

            tChart1.Axes.Bottom.SetMinMax(-1, 3);
            tChart1.Axes.Bottom.StartPosition = 0;
            tChart1.Axes.Bottom.EndPosition = 33;
            tChart1.Axes.Bottom.AxisPen.Color = Color.Red;
            bar.XValues.DateTime = true;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "dd/MM/yyyy";
            tChart1.Axes.Bottom.Labels.Angle = 90;

            axis1.SetMinMax(-1, 3);
            axis1.Horizontal = true;
            axis1.EndPosition = 66;
            axis1.StartPosition = 34;
            axis1.AxisPen.Color = Color.Purple;
            bar1.CustomHorizAxis = axis1;       

            axis2.Horizontal = true;
            axis2.EndPosition = 100;
            axis2.StartPosition = 67;
            axis2.AxisPen.Color = Color.DarkBlue;
            bar2.CustomHorizAxis = axis2;

    
            colorline.Pen.Color = Color.Orange;
            colorline1.Pen.Color = Color.Orange;   

            colorline.Pen.Width = 2;
            colorline1.Pen.Width = 2;

            colorline.Axis = tChart1.Axes.Bottom;
            colorline1.Axis = axis1;          

            colorline.Draw3D = false;
            colorline1.Draw3D = false;
                        
            tChart1.AfterDraw += new Steema.TeeChart.PaintChartEventHandler(tChart1_AfterDraw);
            tChart1.Draw();
        }

        void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
        {
            colorline.Value = colorline.Axis.CalcPosPoint(colorline.Axis.IEndPos);
            colorline1.Value = colorline1.Axis.CalcPosPoint(colorline1.Axis.IEndPos);  
        }

I hope that will helps.

Thanks,

[Glenn F. Henriksen]

Hallo Sandra,
it really helped me. The solution is very good.
I had to change from tChart1.Draw() to tChart1.Draw(this.CreateGraphics()).

Shadow
I don't mean the shadow from the font, but on the frame (tChart1.Header.Transparent = false;).
Have you a solution?

Now I have two another questions!
1. The left axis show the values 10, 20, 30, ....
How I can set the suffix "%": 10%, 20%, ...?
2. How can I set a two-line text under the yellow, right bar from your example? The number "0" should not be deleted.
for example: mean value
2008

Thanks for your help!

Peter

[Yeray]

Hi Peter,

To enable the header shadow:

Code: Select all

tChart1.Header.Font.Size = 15;
tChart1.Header.Transparent = false;
tChart1.Header.Shadow.Visible = true;

To add the % symbol to the left axis labels, you should use the GetAxisDrawLabel event. Assign it into InitializeChart() method:

Code: Select all

private void InitializeChart()
{
    //...
    tChart1.Axes.Left.GetAxisDrawLabel += new Steema.TeeChart.GetAxisDrawLabelEventHandler(Left_GetAxisDrawLabel);
}

And change the text of the labels in the event as follows:

Code: Select all

void Left_GetAxisDrawLabel(object sender, Steema.TeeChart.GetAxisDrawLabelEventArgs e)
{
    e.Text = e.Text + "%";
}

And for the custom text, probably the easiest solution would be using an Annotation Tool. Create it before the tChart1.Draw call and then you will have a correct width value and you could use it to calculate its left position:

Code: Select all

private void InitializeChart()
{
    //...
    Annotation annotation1 = new Annotation(tChart1.Chart);
    annotation1.Text = "my custom text \nwith two lines";
    //...
    tChart1.Draw(this.CreateGraphics());
    //...
    annotation1.Left = axis1.CalcPosValue(0) - annotation1.Width/2;
    annotation1.Top = tChart1.Axes.Bottom.Position + 20;
}

[Glenn F. Henriksen]

Hi Yeray,
very thanks for your help.
I work with TeeChart 1.1.1499 and so I can't find GetAxisDrawLabel and GetAxisDrawLabelEventHandler.
I there a solution for my problem?

Code: Select all

private void InitializeChart()
{
    //...
    tChart1.Axes.Left.GetAxisDrawLabel += new Steema.TeeChart.GetAxisDrawLabelEventHandler(Left_GetAxisDrawLabel);
}

On the left axes I have a scale of 10 to 100%. Now the bars have marks (barMiddleArea.Marks.Visible = true;) . This marks overlap the tChart1.Header.
So I search two solution:
1. How can I stretch the length from the left axis? But the maximum value from the scale ist 100!
or
2. How can I increase the distance between the header and the chart?


And the last question to my question from two days ago:
In the middle area from the bottom axis I have 10 bars. How I get a scale which beginning with the value 26, from 26 to 36 and the value is exactly under every bar (barMiddleArea.CustomBarWidth = 15;)?


Thank you for your support!

Peter

[Yeray]

Hi Peter,

Try to change the left axis labels value format in NET v1 to achieve adding the "%" symbol:

Code: Select all

tChart1.Axes.Left.Labels.ValueFormat = "#,##0.### %";

For the header overlapping, try setting a bigger top margin and setting a header custom position:

Code: Select all

tChart1.Header.CustomPosition = true;
tChart1.Panel.MarginTop = 15;

And for the middle axis, if I understand well you want to show the values from x=26 to x=36. If so, you should do this:

Code: Select all

axis1.SetMinMax(26, 36);