TeeChart Pro . How to work with axes (2022): advanced tutorials and 2022

This article continues with the second half of the unfinished article TeeChart pro. Net tutorial (2022): how to deal with advanced axis and legend operations.

Additional axis

TeeChart provides five axes associated with the data series: left, top, bottom, right, and depth. When you add a new series to the chart, you can define which axis the series should be related to (go to the series tab, general page). You can use the Axis Customdraw method to repeat any (or all) of the previous four axes anywhere on the chart. Note that this method copies your axis and does not add a new custom axis. example:

[C#.Net] 
private void Form1_Load(object sender, System.EventArgs e) 
         
            Random Rnd = new Random(); 
            tChart1.Aspect.View3D = false; 
            tChart1.Panel.Gradient.Visible = true; 
            for(int t = 0; t <= 20; ++t) 
            line1.Add(t, ((Rnd.Next(100)) + 1) - ((Rnd.Next(70)) + 1), Color.Red); 
 
         
 
private void line1_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g) 
         
            int posAxis = 0; 
            if(tChart1.Axes.Left.Maximum > 0) 
             
                tChart1.Axes.Left.Draw(g.ChartXCenter - 10,g.ChartXCenter - 20,g.ChartXCenter,true); 
                posAxis = tChart1.Axes.Left.CalcYPosValue(10); 
                tChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, true); 
             
         
 
[VB.Net] 
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
        Dim t As Integer 
        TChart1.Aspect.View3D = False 
        TChart1.Panel.Gradient.Visible = True 
        For t = 0 To 20 
            Line1.Add(t, ((Rnd() * 100) + 1) - ((Rnd() * 70) + 1), Color.Red) 
        Next 
    End Sub 
 
Private Sub Line1_BeforeDrawValues(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles Line1.BeforeDrawValues 
        Dim posAxis As Integer 
        If TChart1.Axes.Left.Maximum > 0 Then 
            TChart1.Axes.Left.Draw(g.ChartXCenter - 10, g.ChartXCenter - 20, g.ChartXCenter, True) 
            posAxis = TChart1.Axes.Left.CalcYPosValue(10) 
            TChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, True) 
        End If 
End Sub 

The above example code will generate the following figure:

In this example, TeeChart will draw a new axis in the center of the chart, a horizontal axis and a vertical axis. When you scroll the chart (drag with the right mouse button), the new vertical axis will always remain in the center of the chart, and the new horizontal axis will move up and down with the vertical scroll. The new axis is an exact copy of the default axis.

Together with the PositionPercent and stretch attributes, you can float an infinite number of axes anywhere on the chart. Scrolling, scaling, and axis hit detection also apply to custom created axes. You can now create additional axes at design time with the TeeChart editor and at run time with a few lines of code:

TeeChart enables you to create custom axes at design time, enabling them to be saved in TeeChart's tee file format. To do this, open the chart editor and click the axes tab, then select the "+" button to add a custom axis. Then select the location tab and make sure the new custom axis is highlighted. The horizontal check box on this page allows you to define a new custom axis as horizontal or leave it as the default vertical axis. The rest of this page and other tabs in the axes page allow you to change the scale, increment, title, label, scale, minor scale, and position of a custom axis, as described above. To associate this new custom axis with the data series you want, select the series tab and go to the general page. The drop-down combo boxes "horizontal axis" and "vertical axis" will enable you to select a new custom axis according to whether you have defined it before. It is vertical or horizontal.

Via Code 
[C#.Net] 
private void Form1_Load(object sender, System.EventArgs e) 
         
            Line line1 = new Line(); 
            Line line2 = new Line();  
 
            tChart1.Aspect.View3D = false; 
            tChart1.Panel.Gradient.Visible = true; 
            tChart1.Header.Text = "TeeChart Multiple Axes"; 
            tChart1.Series.Add(line1); 
            tChart1.Series.Add(line2); 
 
            for(int t = 0; t <= 10; ++t) 
             
                line1.Add(Convert.ToDouble(t), Convert.ToDouble(10 + t), Color.Red); 
                if(t > 1) 
                line2.Add(Convert.ToDouble(t), Convert.ToDouble(t), Color.Green); 
             
 
            Axis leftAxis = tChart1.Axes.Left; 
 
            leftAxis.StartPosition = 0; 
            leftAxis.EndPosition = 50; 
            leftAxis.AxisPen.Color = Color.Red; 
            leftAxis.Title.Font.Color = Color.Red; 
            leftAxis.Title.Font.Bold = true; 
            leftAxis.Title.Text = "1st Left Axis"; 
 
//            You are able to then position the new Axis in overall relation to the Chart  
//            by using the StartPosition and EndPosition  properties. 
// 
//            StartPosition=50 
//            EndPosition=100 
// 
//            These figures are expressed as percentages of the Chart Rectangle with 0 (zero) 
//            (in the case of a vertical Axis) being Top. These properties can be applied to  
//            the Standard Axes to create completely partitioned 'SubCharts' within the Chart. 
 
            Axis axis1 = new Axis(false, false, tChart1.Chart); 
 
            tChart1.Axes.Custom.Add(axis1); 
 
            line2.CustomVertAxis = axis1; 
 
            axis1.StartPosition = 50; 
            axis1.EndPosition = 100; 
            axis1.AxisPen.Color = Color.Green; 
            axis1.Title.Font.Color = Color.Green; 
            axis1.Title.Font.Bold = true; 
            axis1.Title.Text = "Extra Axis"; 
            axis1.PositionUnits= PositionUnits.Percent; 
                                                axis1.RelativePosition = 20; 
         
 
[VB.Net] 
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
        Dim Line1 As New Steema.TeeChart.Styles.Line() 
        Dim Line2 As New Steema.TeeChart.Styles.Line() 
        Dim t As Integer 
 
        TChart1.Aspect.View3D = False 
        TChart1.Panel.Gradient.Visible = True 
        TChart1.Header.Text = "TeeChart Multiple Axes" 
        TChart1.Series.Add(Line1) 
        TChart1.Series.Add(Line2) 
 
        For t = 0 To 10 
            Line1.Add(t, 10 + t, Color.Red) 
            If (t > 1) Then 
                Line2.Add(t, t, Color.Green) 
            End If 
        Next 
 
        With TChart1.Axes.Left 
            .StartPosition = 0 
            .EndPosition = 50 
            .AxisPen.Color = Color.Red 
            .Title.Font.Color = Color.Red 
            .Title.Font.Bold = True 
            .Title.Text = "1st Left Axis" 
        End With 
 
        'You are able to then position the new Axis in overall relation to the Chart  
        'by using the StartPosition and EndPosition  properties. 
 
        '      StartPosition = 50 
        '      EndPosition = 100 
 
        'These figures are expressed as percentages of the Chart Rectangle with 0 (zero) 
        '(in the case of a vertical Axis) being Top. These properties can be applied to  
        'the Standard Axes to create completely partitioned 'SubCharts' within the Chart. 
 
        Dim Axis1 As New Steema.TeeChart.Axis(False, False, TChart1.Chart) 
 
        TChart1.Axes.Custom.Add(Axis1) 
 
        Line2.CustomVertAxis = Axis1 
 
        Axis1.StartPosition = 50 
        Axis1.EndPosition = 100 
        Axis1.AxisPen.Color = Color.Green 
        Axis1.Title.Font.Color = Color.Green 
        Axis1.Title.Font.Bold = True 
        Axis1.Title.Text = "Extra Axis" 
        Axis1.PositionUnits.=  PositionUnits.Percent; 
        Axis1.RelativePosition = 20 
End Sub 

The coding example above will show the following chart:

The choice is infinite! We recommend being careful when using custom axes, because it's easy to start filling the screen with new axes and forget which axis to manage!

Axis events provide runtime flexibility to modify axis labels and present user interactivity on axis clicks.

Next, take an example of the OnClickAxis event.

[C#.Net] 
private void tChart1_ClickAxis(object sender, System.Windows.Forms.MouseEventArgs e) 
         
            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom)) 
             
                MessageBox.Show("Clicked Bottom Axis at: " + line1.XScreenToValue(e.X)); 
             
         
 
[VB.Net] 
Private Sub TChart1_ClickAxis(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickAxis 
        If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then 
            MsgBox("Clicked Bottom Axis at: " & Line1.XScreenToValue(e.X)) 
        End If 
End Sub 

Allows you to modify axis labels. Next, let's take an example of the OnGetAxisLabel event.

[C#.Net] 
private void button1_Click(object sender, System.EventArgs e) 
         
            bar1.FillSampleValues(20); 
            tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark; 
         
 
private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e) 
         
            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom)) 
            e.LabelText = "Period " + Convert.ToString(e.ValueIndex); 
         
 
[VB.Net] 
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 
        Bar1.FillSampleValues(20) 
        TChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Mark 
End Sub 
 
Private Sub TChart1_GetAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetAxisLabelEventArgs) Handles TChart1.GetAxisLabel 
        If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then 
            e.LabelText = "Period " & e.ValueIndex 
        End If 
End Sub 

Lets you decide which axis labels should be displayed. The following is an example of the ongetnextaslabel event. You should use the e.Stop Boolean property to include / exclude axis labels.

[C#.Net] 
private void Form1_Load(object sender, System.EventArgs e) 
         
            line1.FillSampleValues(20); 
         
 
private void tChart1_GetNextAxisLabel(object sender, Steema.TeeChart.TChart.GetNextAxisLabelEventArgs e) 
         
            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom)) 
             
                e.Stop = false; 
                switch(e.LabelIndex) 
                 
                    case 0: e.LabelValue = 5; break; 
                    case 1: e.LabelValue = 13; break; 
                    case 2: e.LabelValue = 19; break; 
                    default: e.Stop = true; break; 
                 
             
         
 
[VB.Net] 
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
        Line1.FillSampleValues(20) 
End Sub 
 
Private Sub TChart1_GetNextAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetNextAxisLabelEventArgs) Handles TChart1.GetNextAxisLabel 
        If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then 
            e.Stop = False 
            Select Case e.LabelIndex 
                Case 0 : e.LabelValue = 5 
                Case 1 : e.LabelValue = 13 
                Case 2 : e.LabelValue = 19 
                Case Else : e.Stop = True 
            End Select 
        End If 
End Sub 

Tags: Database Data Analysis .NET

Posted by l008com on Fri, 15 Apr 2022 15:13:26 +0930