Chart Zoom and Scroll

Scrolling and Zooming a Chart is simply setting its Axis scales to the desired values. After zooming or scrolling a Chart, all Series will repaint their points in their new positions.

Note: Pie Series can’t be scrolled or zoomed. You can control Pie dimensions using Chart margins or Pie custom radius properties.

Topics in this section:

Zoom

Animated Zoom

Zooming by code

Undoing Zoom

Zoom Events

Scrolling

Scroll event

Controlling scroll

Keyboard Scrolling

Zoom

Charts can be zoomed programmatically or by user interaction with mouse dragging. See the Chart Zoom Class. The Chart Zoom.Allow property controls if users can apply zoom (default is True):

Chart1.Zoom.Allow:=True;

Users can zoom drawing a rectangle around the Chart area they want to see in detail.

Note:

Dragging should be done from top / left to bottom down. Dragging in the opposite direction resets axis scales ( no zoom ).

You can decide which mouse button and / or keys must be pressed to draw the zoomed area rectangle (degault is Left Mousebutton):

Chart1.Zoom.MouseButton:= mbMiddle;

As soon as users release the mouse button, TeeChart repaints to show the zoomed area.

Animated Zoom

You can control if TeeChart will calculate zoom positions immediately or it will be calculating zoom in short “steps” until reaching the desired zoom window.

This makes an “animated” zoom effect, which helps to identify better the zoomed area. This code activates animated zoom:

Chart1.Zoom.Animated:=True;

Set the AnimatedZoomSteps property to the desired number of intermediate zooms:

Chart1.Zoom.AnimatedSteps:=7;

Advanced:

You can control how linear the animated zoom steps are, using the global variable AnimatedZoomFactor, from 1 to n:

AnimatedZoomFactor:=2.0;

Zooming by code

You can zoom in or zoom out a Chart using any of these methods:

ZoomRect adjusts axis scales to show the TRect parameter area. The rectangle is expressed in screen pixel co-ordinates. Rectangle areas inside Chart1.ChartRect rectangle will zoom in, while area outside ChartRect will zoom out.

Chart1.ZoomRect( Rect( 100, 100, 200, 200 ) );

ZoomPercent sets Chart zoom to a percentual value. This example sets Zoom to 110 % percent to zoom in :

Chart1.ZoomPercent( 110 );

To reset zoom:

Chart1.ZoomPercent( 100 );

The above methods work independently, you can use both at the same time.

Undoing Zoom

The UndoZoom method resets axis scales to their automatic Minimum and Maximum values:

Chart1.UndoZoom;

This will display all Series points, undoing any previous zoom in or zoom out operation, either by code or using the mouse.

Note:

If you want axis scales to be at specific values after undoing zoom, you can use the Chart OnUndoZoom event, documented below.

The Zoomed boolean property returns if all four Chart Axis are automatic or not. If not Chart1.Zoomed then Chart1.ZoomPercent( 150 );

Zoom Events

The OnZoom event is triggered whenever zoom is applied to a Chart, either manually or programmatically:

procedure TForm1.Chart1Zoom(Sender: TObject);
begin

Button1.Visible:=True ; { make visible the “no-zoom” button }

end;

The OnUndoZoom event is called when undoing zoom, by code or by mouse.

Scrolling

Scrolling is very similar to zoom. Axis scales are incremented or decremented and the whole Chart component is repainted to show Series points at their new positions.

The Chart AllowPanning property controls if users can scroll Chart contents by dragging the mouse. Its possible values are:

pmNoneNo scroll is allowed.

pmHorizontal,

pmVertical Allow scroll only on these directions.

pmBoth Allow complete scroll over all directions.

Example:

Chart1.AllowPanning := pmNone ;  { no scroll is                                 allowed }

Like Zoom, the following control mouse and keyboard requirements to start scrolling:

Chart1.ScrollMouseButton := mbRight; { button used to scroll }
{Global variable}
TeeScrollKeyShift    : [ ssCtrl ];  { CONTROL key should be pressed to start scroll }

You can programmatically scroll a Chart, using the Axis Scroll method:

Procedure Scroll(Const Offset:Double;     
                        CheckLimits:Boolean);

Example:

Chart1.BottomAxis.Scroll(  1000, True );

The above code increments BottomAxis scales by 1000. This is the same as doing:

With Chart1.BottomAxis do SetMinMax(Minimum+1000, Maximum+1000);

and setting BottomAxis Automatic property to False.

The Chart will repaint and the horizontal bottom axis will be “scrolled” to the left a quantity of “1000” in axis scales.

The “CheckLimits” boolean parameter instructs the axis to scroll ONLY if there are more Series points in the scrolling direction.

Scroll event

The Chart OnScroll event is fired every time users scroll manually the Chart.

procedure TForm1.Chart1Scroll(Sender: TObject);
begin
    Label1.Caption := ‘This Chart has scrolled ! ‘ ;
end;

Controlling scroll

The OnAllowScroll event can be used to programmatically accept or refuse a planned scroll:

procedure TForm1.Chart1AllowScroll(Sender: TChartAxis; var AMin,
  AMax: Double; var AllowScroll: Boolean);
begin
  if Sender = Chart1.BottomAxis then
     if AMax > 1000 then AllowScroll := False ;
end;

The above code refuses user scrolling if attempting to set bottom axis maximum to a value greater than 1000. The same checking can be performed over the DateTime axis:

if Sender = Chart1.BottomAxis then
     if AMax > EncodeDate( 2000, 12, 31 ) then AllowScroll := False ;

Keyboard Scrolling

To scroll with arrow keys, first, the Form KeyPreview property should be set to True.

At the KeyDown event, and depending on the pressed arrow key, the four Chart axis are scrolled using the Axis Scroll method.