AXTutorial13

From Steema Software Reference Wiki
Jump to: navigation, search

Ax.png

Contents page
Previous | Next

Tutorial 13 - Custom drawing on the Chart Panel

TeeChart offers extensive custom drawing facilities via the Canvas object. With Canvas you may add shapes, lines and text anywhere on the Chart Panel and define their colours, pen and brush styles.

TeeChart Canvas

Drawing order

When using TeeChart's Canvas methods remember that drawing order is important. Drawing a Line on the Chart then adding Series data points will cause the Line to be overdrawn. You could put the Line in the Series BeforeDrawValues event for the Line to appear above the Chart grid and below the Series. You could place the Line code in the OnAfterDraw event for the Line to appear above the Series.

Event order, 4 principle Chart draw events

  • OnBeforeDrawChart event
  • OnBeforeDrawAxes event
  • OnBeforeDrawSeries event
  • OnAfterDraw event

Ensuring that custom drawn items are saved to the Canvas

If you do not place calls to Canvas draw code in one of the Chart events, custom drawing will not be saved to the Canvas permanently thus causing any addition to be lost when an application is minimised or another Window placed over it. Your code does not need to reside directly in the Chart events, user drawn items can be saved for the life of the Chart window if you place code in OnBeforeDrawSeries/OnAfterDraw to check for flags set by your runtime Draw methods and thus run your draw code when activity is flagged as true.

Drawing Lines

Let's add a Canvas Line:

Example


'Draw a Line diagonally from top left to bottom right
'in the Chart Area of a 2D Chart
With TChart1
  'Move the pointer to the top left Chart point
  .Canvas.MoveTo .Axis.Left.Position, .Axis.Top.Position
  'Draw the Line
  .Canvas.LineTo .Axis.Right.Position, .Axis.Bottom.Position
End With

On a 3D Chart the Axis positions are offset from the Chart area due to 3D orthogonal displacement. We can move the Line accordingly:

Example


'Draw a Line diagonally from top left to bottom right
'in the Chart Area of a 3D Chart
With TChart1
  'Move the pointer to the top left Chart point   adjust for 3D
  .Canvas.MoveTo .Axis.Left.Position   .Aspect.Width3D, .Axis.Top.Position - .Aspect.Height3D
  'Draw the Line   adjust for 3D
  .Canvas.LineTo .Axis.Right.Position   .Aspect.Width3D, .Axis.Bottom.Position - .Aspect.Height3D
End With

Canvas Pen and Brush

The Line above is drawn using the Pen and Brush defined for the last object drawn before the Line is drawn. That may or may not be the Pen you want. Change the Pen accordingly:

Example

'Define Pen and Brush before drawing the Line
With TChart1
  .Canvas.Pen.Color = vbBlue
  .Canvas.Pen.Width = 1
  .Canvas.Pen.Style = psDot 'Pen must be 1 to use Pen.Style
  .Canvas.Brush.Style = bsClear 'transparency
  .Canvas.MoveTo .Axis.Left.Position   .Aspect.Width3D, .Axis.Top.Position - .Aspect.Height3D
  .Canvas.LineTo .Axis.Right.Position   .Aspect.Width3D, .Axis.Bottom.Position - .Aspect.Height3D
End With

Adding 2D Shapes

Add Canvas Shapes in a similar manner to Canvas Lines. The following example adds a Rectangle in the centre of the Chart Area:

2D Chart
2D Charts only support 2D shapes.

Example


With TChart1
   'prepare Pen and Brush
   .Canvas.Pen.Color = vbBlue
   .Canvas.Pen.Width = 1
   .Canvas.Pen.Style = psDot
   .Canvas.Brush.Color = vbWhite
   .Canvas.Brush.Style = bsSolid
   .Canvas.Rectangle (.Axis.Left.Position   (.Axis.Right.Position - .Axis.Left.Position) / 3), _
                     (.Axis.Top.Position   (.Axis.Bottom.Position - .Axis.Top.Position) / 3), _
                     (.Axis.Left.Position   (2 * (.Axis.Right.Position - .Axis.Left.Position) / 3)), _
                     (.Axis.Top.Position   (2 * (.Axis.Bottom.Position - .Axis.Top.Position) / 3)) _

End With


3D Charts
On a 3D Chart you can move the Rectangle in a Z plane too. See the RectangleWithZ method. This example for an orthogonal or Nativemode/OpenGL Chart places the Rectangle on the Left Wall but displaces it halfway towards the rear of the Chart (towards the Back Wall).


With TChart1
   'prepare Pen and Brush
   .Canvas.Pen.Color = vbBlue
   .Canvas.Pen.Width = 1
   .Canvas.Pen.Style = psDot
   .Canvas.Brush.Color = vbWhite
   .Canvas.Brush.Style = bsSolid
   'Draw Rectangle with Z displacement
   .Canvas.RectangleWithZ .Axis.Left.Position, _
          .Axis.Top.Position, _
	  .Axis.Left.Position   ((.Axis.Right.Position - .Axis.Left.Position) / 2), _
          .Axis.Top.Position   ((.Axis.Bottom.Position - .Axis.Top.Position) / 2), _
          .Aspect.Width3D / 2
End With

Adding 3D Shapes

You may add 3D shapes to 3D Charts. This example draws a Cube in the top, left quadrant of the Chart rectangle. The depth covers the area from the front of the Walls to the Back Wall. See the Cube method.


With TChart1
   'prepare Pen and Brush
   .Canvas.Pen.Color = vbBlue
   .Canvas.Pen.Width = 1
   .Canvas.Pen.Style = psDot
   .Canvas.Brush.Color = vbWhite
   .Canvas.Brush.Style = bsSolid
   'Draw Cube
   .Canvas.Cube .Axis.Left.Position, _
          .Axis.Left.Position   ((.Axis.Right.Position - .Axis.Left.Position) / 2), _
          .Axis.Top.Position, _
          .Axis.Top.Position   ((.Axis.Bottom.Position - .Axis.Top.Position) / 2), _
          0, .Aspect.Width3D, True
End With


Adding text

2D Text location
Add Text to the last Rectangle:

Example


With TChart1
   'prepare Pen and Brush
   .Canvas.Pen.Color = vbBlue
   .Canvas.Pen.Width = 1
   .Canvas.Pen.Style = psDot
   .Canvas.Brush.Color = vbWhite
   .Canvas.Brush.Style = bsSolid
   .Canvas.Rectangle (.Axis.Left.Position   (.Axis.Right.Position - .Axis.Left.Position) / 3), _
                     (.Axis.Top.Position   (.Axis.Bottom.Position - .Axis.Top.Position) / 3), _
                     (.Axis.Left.Position   (2 * (.Axis.Right.Position - .Axis.Left.Position) / 3)), _
                     (.Axis.Top.Position   (2 * (.Axis.Bottom.Position - .Axis.Top.Position) / 3)) _

   .Canvas.Font.Color = vbRed
   .Canvas.TextOut (.Axis.Left.Position   (.Axis.Right.Position - .Axis.Left.Position) / 3)   5, _
                   (.Axis.Top.Position   (.Axis.Bottom.Position - .Axis.Top.Position) / 3)   5, _
                   "My text"
End With

3D Text location
You can place Text in a differing 3D plane by using the TextOut3D method.

Example


 With TChart1
  .Canvas.Brush.Style = bsClear
  .Canvas.TextOut3D .Axis.Left.Position, .Axis.Top.Position, .Aspect.Width3D / 2, "Hello"
 End With


Applied example

This example takes the 3rd and 10th values of a Series, plots a Line between them and tells us the value of the first and Last point of the new Line and the difference between them:

Example

'First add some data to the empty Chart
With TChart1
  'Add and populate Series
  .AddSeries scLine
  .Series(0).FillSampleValues 20
End With


'You could put this code in the OnAfterDraw event
With TChart1
  If .SeriesCount > 0 Then
    If .Series(0).Count > 10 Then
      'Add some Shapes
      .Canvas.Pen.Color = vbBlue
      .Canvas.Pen.Width = 1
      .Canvas.Pen.Style = psDot
      .Canvas.Brush.Style = bsClear
      .Canvas.MoveTo .Axis.Bottom.CalcXPosValue(.Series(0).XValues.Value(3)), _
                     .Axis.Left.CalcYPosValue(.Series(0).YValues.Value(3))
      .Canvas.LineTo .Axis.Bottom.CalcXPosValue(.Series(0).XValues.Value(10)), _
                     .Axis.Left.CalcYPosValue(.Series(0).YValues.Value(10))
      .Canvas.Brush.Style = bsSolid
      .Canvas.TextOut .Axis.Bottom.CalcXPosValue(.Series(0).XValues.Value(3)), _
                      .Axis.Left.CalcYPosValue(.Series(0).YValues.Value(3)), _
                      "Point value: "   Str$(.Series(0).YValues.Value(3))
      .Canvas.TextOut .Axis.Bottom.CalcXPosValue(.Series(0).XValues.Value(10)), _
                      .Axis.Left.CalcYPosValue(.Series(0).YValues.Value(10)), _
                      "Point value: "   Str$(.Series(0).YValues.Value(10))
      .Canvas.TextOut .Axis.Bottom.CalcXPosValue(.Series(0).XValues.Value(10)), _
                      .Axis.Left.CalcYPosValue(.Series(0).YValues.Value(10))   _
                      .Canvas.TextHeight("Any letter"), "Change is: "   _
                      Str$(.Series(0).YValues.Value(10) - .Series(0).YValues.Value(3))
    End If
  End If
End With
End Sub



PREVIOUS

NEXT


© 1998-2019 Steema Software SL. All rights reserved.