Tutorial 11 - Zoom and Scroll

Zoom and Scroll are useful aids for focusing on specific data in a densely populated Chart. See the Visual Basic example code in folders 'Animated Zoom' and 'Scrolling'.

Contents

How to Zoom and Scroll using the Mouse

Zoom
Scroll

How to Zoom and Scroll by code

Zoom
Animated Zoom
Zoom events
Scroll

How to Zoom and Scroll using the Mouse

Zoom

To zoom in on a Chart, press the right mousebutton at the top left hand corner of the area you wish to zoom in on and, maintaining the mousebutton pressed, drag out the rectangle to the bottom righthand corner of the zoom area. release the mousebutton and the Chart will redraw the area selected.

To undo the zoom, press the left mousebutton anywhere on the Chart area and drag up and left with the mousebutton depressed. Release the button and the Chart will redraw to the originally defined Chart area.

Scroll

To scroll a Chart across, press the left mousebutton and, maintaining the mousebutton pressed, drag the mouse in the direction you wish to scroll the Chart. When you release the mousebutton the Chart will remain at the new location.

To undo the scroll, press the left mousebutton anywhere on the Chart area and drag up and left with the mousebutton depressed. Release the button and the Chart will redraw to the originally defined Chart area.

How to Zoom and Scroll by code

Zoom

Zoom is, by default, enabled. Use the Zoom.Enable property to disable zoom. See the Zoom interface for a full list of properties and methods associated with Zoom. To define a recatngular area over which to Zoom use the ZoomRect method.

Example

TChart1.Zoom.ZoomRect 100, 100, 120, 120

The ZoomRect co-ordinates are defined in screen pixels where 0,0 is the top left hand point of the Chart Panel.
The following code will zoom in on an area between the 2nd and 5th x-axis points, setting the y-axis to the scale of the maximum and minimum points of the entire Chart:

With TChart1
  .Zoom.ZoomRect .Axis.Bottom.CalcXPosValue(2), _ 
      .Axis.Left.CalcYPosValue(.Axis.Left.MaxYValue), _
      .Axis.Bottom.CalcXPosValue(5), _
      .Axis.Left.CalcYPosValue(.Axis.Left.MinYValue)
End With

Use 'Undo' to Zoom back out.

TChart1.Zoom.Undo

Animated Zoom

Animated Zoom offers stepped zooming. Instead of jumping from 'zoomed out' to 'zoomed in' in one step, you may set AnimatedZoom to enabled and define staggered steps for the zoom. Once AnimatedZoom is enabled you may zoom manually with the Mouse or by code.

Example

With TChart1
  .Zoom.Animated = True
  .Zoom.AnimatedSteps = 10
  .Zoom.ZoomRect .Axis.Bottom.CalcXPosValue(2), _ 
      .Axis.Left.CalcYPosValue(.Axis.Left.MaxYValue), _
      .Axis.Bottom.CalcXPosValue(5), _
      .Axis.Left.CalcYPosValue(.Axis.Left.MinYValue)
End With

Zoom events

Zooming in manually, or by code, will trigger the TChart.OnZoom event. Zooming out will trigger the TChart.UndoZoom event.

Scroll

Scroll is enabled in all directions as default. Use the Scroll.Enable property to disable Scroll or limit Scroll to one direction. The easiest way to scroll by code is to use the Axis Scroll method:

  TChart1.Axis.Bottom.Scroll 10, False
  'The value is the offset. 'False' refers to whether or not TeeChart 
  'will allow scrolling beyond Series value limits.

Another way to control scroll is to define Axis maximum and minumum to scroll by code.

Example

With TChart1
  .Scroll.Enable = pmHorizontal 'permit manual scrolling horizontally only.
  .Axis.Bottom.Automatic = False
  .Axis.Bottom.Minimum = 2
  .Axis.Bottom.Maximum = 5
  .Repaint
End With

You could use scrollbars to change the Axis Minimum and Maximum values and thus control scrolling entirely by code.

Example

With TChart1
  .Scroll.Enable = pmHorizontal 'permit manual scrolling horizontally only.
  .Axis.Bottom.Automatic = False
  'limit display to 5 points onscreen 
  .Axis.Bottom.Minimum = HScroll1.Value - 5
  .Axis.Bottom.Maximum = HScroll1.Value
  .Repaint
End With