TAChart Tutorial: Chart Tools/de

│ Deutsch (de) │ English (en) │

Einführung

Charts sind leistungsfähige Werkzeuge, um Beziehungen zwischen Daten darzustellen. Sie sind besonders mächtig, wenn der Benutzer mit ihnen interaktiv arbeiten kann, zum Beispiel:

• in eine Datenreihe mit sehr, sehr vielen Datenpunkten hineinzoomen, um mehr Details zu sehen,
• den sichtbaren Ausschnitt verschieben,
• Anzeigen von Datenwerten für die Datenreihen, oder Bestimmen von charakterischen Parametern aus dem Plot.

Das TAChart Package ist mit einer leistungsfähigen Sammlung von Werkzeugen ausgestattet, die hilfreich sind für die Erstellung interaktiver Charts. In diesem Tutorial wollen wir zeigen, wie man diese Werkzeuge anwenden kann.

Wenn du nicht mit TAChart vertraut bist, empfehlen wir dir, einen Blick auf das "Getting started"-Tutorial zu werfen. Natürlich musst du grundlegende Erfahrung im Umgang mit Lazarus und FPC haben.

Vorbereitung

Zunächst brauchen wir einen Chart, mit dem wir spielen können. Statt einen Chart neu zu erzeugen, verwenden wir den im Tutorial Getting started erzeugten einfachen Chart. In diesem Projekt hatten wir mit Hilfe von TLineSeries-Komponenten mathematischen Funktionen für x zwischen -10 and 10 graphisch dargestellt. Die Datenwerte wurden in der internen ListChartSource jeder Datenreihe gespeichert. Kopiere die Projekt-Dateien (project1.lpi, project1.lpr, unit1.pas, unit1.lfm) in einen separaten Ordner für das neue Tutorial.

Zoomen und Verschieben - der leichte Weg

Zoomen

Das Erzeugen einer Ausschnittsvergrößerung eines Charts wollen wird mit dem englischen Wort "Zoomen" bezeichnen. Das ist ein ganz einfacher Vorgang -- man muss dafür keine einzige Zeile Code schreiben, denn diese Möglichkeit ist schon intern in der TChart-Komponente eingebaut. Der Benutzer muss nur mit gedrückter linker Maus-Taste um das zu vergrößernde Detail herum ein Rechteck aufziehen. Wichtig ist, dass die Maus von der Ecke links/oben zur Ecke rechts/unten gezogen werden muss, um den Zoom-Effekt zu erhalten. Wenn die Maustaste losgelassen wird, wird der Inhalt des Rechtecks vergrößert und füllt dann den kompletten Chart aus. Einfach.

Man kann diesen Vorgang wiederholen, um tiefer und tiefer in den Chart hineinzuzoomen.

Um zur originalen, unvergrößerten Ansicht zurückzukehren, klickt man einfach mit der linken Maustaste irgendwo in den Chart oder zieht die Maus mit gedrückter linker Taste in beliebige Richtung - natürlich nicht von links/oben nach rechts/unten, denn das würde weiter hineinzoomen.

Falls du aus irgendeinem Grund das Zoomen verbieten möchtest, kannst du die TChart-Eigenschaft AllowZoom auf False schalten. Darüber hinaus gibt es es keine Möglichkeit, das eingebaute Zoom-Verhalten zu beeinflussen. Aber nicht verzagen: etwas weiter unten diskutieren wir die Chart-Tools, und damit hat man fast unbegrenzte Möglichkeiten, mit dem Chart zu interagieren.

Verschieben

Nachdem du in den Chart hineingezoomt hast, willst du vielleicht den Ausschnitt etwas verschieben, um eine bessere Ansicht zu finden. Dieses Verschieben wird auf Englisch als "Panning" bezeichnet. Auch hier gibt es in TChart-Komponente schon eine eingebaute Methode: Verschiebe die Maus mit gedrückter rechter Maustaste, und der sichtbare Ausschnitt folgt der Bewegung der Maus. Weitere Kontrollmöglichkeiten hat man mit Hilfe der Chart-Tools.

Genauso wie beim Zoomen kann man auch hier den Originalausschnitt wiederherstellen, indem man mit der Maus irgendwo in den Chart klickt, oder die Maus mit gedrückter linker Taste in beliebige Richtung zieht (außer von links/oben nach rechts/unten). Bitte beachte, dass man hier die linke Maustaste verwendet, obwohl das Verschieben mit der rechten Maustaste erfolgt ist.

Seit Lazarus v2.1+ hat TChart eine Eigenschaft AllowPanning mit der man das eingebaute Verschieben unterbinden kann. Wie wir aber gleich sehen werden, kann man das Verschieben auch mit Hilfe der Chart-Tools ausschalten, so dass ältere Lazarus-Versionen hier keinen Nachteil haben.

Grundlegendes über die Chart-Tools

Was sind die Chart-Tools?

Wie du gesehen hast, kann die Programmierung der Zoom- und Panning-Möglichkeiten nicht einfacher sein -- man muss gar nichts tun, diese Möglichkeiten sind schon vorhanden. Aber andererseits sind die eingebauten Routinen recht eingeschränkt: Zoomen funktioniert nur mit Hilfe der linken Maustaste, Verschieben nur mit Hilfe der rechten, es gibt keine Unterstützung des Mausrades, das Zoomen/Verschieben kann nicht auf die horizontale oder vertikale Richtung beschränkt werden, Datenwerte könnten nicht ausgelesen werden, usw, usf.

Für vielseitige Möglichkeiten der Benutzerinteraktion wurden mehrere Chart-Tools der TAChart-Bibliothek hinzugefügt. Jedes Werkzeug ist für eine bestimmte Aufgabe spezialisiert. Aus Benutzersicht gibt es zwei Typen von Werkzeugen: Wertebereichs-Tools und Daten-Tools.

• Wertebereichs-Tools verändern den Wertebereich des Chart -- das ist das durch die Achsen definierte Sichtfenster auf die Daten. Sie sind zuständig für das Zoomen und Verschieben. Für das Zoomen kann man wählen zwischen TZoomDragTool, TZoomClickTool uder TZoomMouseWheelTool. Für das Verschieben gibt es das TPanDragTool, TPanClickTool und das TPanMouseWheelTool. Beachte, dass es keine speziellen Werkzeuge gibt, um das Zoomen/Verschieben rückgängig zu machen - diese Möglichkeit ist schon eingebaut.
• Daten-Tools ermöglichen interaktiven Zugang auf die Daten, die in den Datenreihen dargestellt sind, oder ermöglichen es sogar, die Daten zu bearbeiten: es gibt ein TDataPointClickTool, TDataPointDragTool, TDataPointHintTool, TDataPointCrosshairTool und ein TDataPointDistanceTool.
• Falls keines dieser Werkzeuge für den gewünschten Zweck in Frage kommt, gibt es noch das TUserDefinedTool, mit dessen Hilfe man sich das erforderliche Verhalten selbst programmieren kann.

Eigenschaften der Chart-Tools

All diese Werkzeuge haben eine Eigenschaft namens Shift, die eine Menge von "Tasten-Codes" enthält, mit denen das Tool aktiviert werden kann. Dies sind die in der LCL standardmäßig vorhandenen Elemente der Aufzählung TShiftState.

Ein Beispiel: Wenn die Shift-Eigenschaft des Tools die Elemente ssCtrl und ssLeft enthält, dann wird das Tool aktiv, wenn der Benutzer die Ctrl-Taste und die linke Maustaste drückt. Beachte, dass alle Bedingungen erfüllt sein müssen, das Werkzeug wird nicht aktiv, falls nur die linke Maustaste allein gedückt wird. Jedes Werkzeug muss seine eigene, eindeutige Kombination von Shift-Kombinationen haben.

Eine Bemerkung über die Shift-Werte, die der Tastatur zugeordnet sind: Um Nachrichten über Tastaturereignisse erhalten zu können, muss der Chart fokussiert sind. Falls Werkzeuge nicht wie erwartet funktionieren, versuche, Chart.SetFocus aufzurufen; dadurch wird der Chart automatisch fokussiert, wenn der Benutzer die Maus in den Chart bewegt. Der Nachteil der AutoFocus-Methode darf aber nicht unerwähnt bleiben: wenn der Benutzer gerade Text z.B. in ein Memo eintippt, die Maus über den Chart bewegt und dann weitertippen möchte, hat das Memo den Fokus verloren, und nachfolgende Tastendrücke werden ignoriert...

Es gibt eine weitere Bedingung, die erfüllt sein muss, damit ein Tool aktiv wird: Seine Eigenschaft Enabled muss auf true gesetzt sein (aber das ist die Default-Einstellung). Diese Eigenschaft ist nützlich, wenn mehrere Tools sich dieselben Shift-Kombinationen teilen und durch anderen Code aktiviert werden sollen, z.B. durch Klicken auf Buttons auf einer Toolbar.

Alle Werkzeuge haben verschiedene Ereignisse gemeinsam, die erzeugt werden, bevor oder nachdem eine Taste oder eine Maus-Taste gedrückt oder losgelassen wurde. Bei der Maus werden auch Ereignisse ausgelöst, bevor und nachdem die Maus bewegt wurde. Normalerweise funktionieren die Chart-Tools, ohne dass diese Ereignisse behandelt werden. Aber sie sind nötig, wenn zusätzliche Funktionalität bereitgestellt werden soll. Wir werden dazu weiter unten in diesem Tutorial ein Beispiel finden.

TChartToolset

Alle Chart-Tools sind einer speziellen Komponenten zusammengeführt, TChartToolset. Sie befindet sich auf der Komponentenpalette irgendwo in der Mitte der Chart-Seite und hat das Icon mit dem roten Schraubenzieher.

Die TChartToolset-Komponente ermöglicht die Kommunikation zwischen den einzelnen Tools und derm Chart. Aus diesem Grund hat der Chart eine Eigenschaft Toolset, die man mit der TChartToolset-Instanz verbinden muss. Beachte, dass das eine 1:n-Beziehung ist, d.h. ein Toolset kann von mehreren Charts verwendet werden - ein schönes Feature! Ich sollte auch erwähnen, dass ich häufig vergesse, diese Verbindung herzustellen -- und als Folge einige Zeit aufwenden muss, um herauszufinden, warum die Werkzeuge nicht funktionieren...

Zoomen mit dem Mausrad

Aber jetzt genug mit der Theorie! Es ist Zeit für ein praktisches Beispiel.

Zunächst sollten wir die Werkzeuge zu unserem Demo-Chart hinzufügen. Zu diesem Zweck benötigen wir ein TChartToolset . Setze diese Komponente auf das Formular und verbinde sie mit der Eigenschaft Toolset des Chart.

Obwohl wir noch gar keine Workzeuge im Toolset angelegt haben, ist jetzt vielleicht ganz lehrreich, das Programm zu kompilieren und laufen zu lassen. Versuche, so wie eingangs erwähnt, in den Chart zu zoomen oder den Ausschnitt zu verschieben. Oh -- funktioniert nicht mehr! Das ist eine wichtige Beobachtung: Dadurch dass wir ein TChartToolset mit dem Chart verbunden haben, wurde das im Chart eingebaute Toolset ersetzt. Aus diesem Grund funktionieren die eingebauten Werkzeuge für Zoomen und Panning nicht mehr.

Um diese Funktionen wieder zu ermöglichen, müssen wir ein oder mehrere Tools für Zoomen und Verschieben in die Toolset-Komponente einbauen.

Was wollen wir erreichen? Vielleicht könnten wir statt der linken und rechten Maustaste das Mausrad für Zoomen/Verschieben verwenden? Und wir könnten mit der nun freigewordenen linken Maustaste ein Tool aktivieren, mit dem man durch Klicken auf einen Datenpunkt dessen Werte auslesen und anzeigen kann.

Um für das Zoomen ein Mausrad-Tool zu verwenden, musst du auf dem ChartToolset1 auf dem Formular oder im Objekt-Baum des Objekt-Inspektores doppelklicken, oder mache jeweils dort einen Rechtsklick und wähle den Eintrag "Werkzeuge bearbeiten" - genauso wie man bei allen Collection-Editoren von TAChart vorgeht. Drücke auf den "+ Hinzuf"-Schalter und wähle "Zoomen mit Mausrad" aus der heruntergeklappten Liste. Damit erscheint ein neues Element ChartToolset1ZoomMousewheelTool1 im Objekt-Baum als Kind-Knoten des ChartToolset1.

Wenn man jetzt das Programm laufen lassen würde, dann würde das Zommen immer noch nciht funktionieren, denn das Werkzeug hat Eigenschaften ZoomFactor and ZoomRatio, die die Zoomstufen pro Mausrad-Raste definieren. Und diese Eigenschaften stehen immer noch auf ihrem Default-Wert 1. Also: Setze ZoomFactor auf den Wert 1.1 und starte des Programm: Jetzt funktioniert das Zoomen.

Wenn die das Mausrad zu dir herdrehst, wird der Chart vergrößert, genauso wie wenn du den Bildschirm zu dir herziehen würdest. Viele Programme arbeiten anders herum: bei der genannten Drehung wird der Chart immer kleiner, wie wenn du dich vom Chart wegbewegen würdest. Wenn du dieses Verhalten bevorzugst, dann musst du den ZoomFactor auf eine Zahl kleiner als 1 setzen, zum Beispiel auf 0.9. (Für den Rest des Tutorials werden wir aber beim Wert 1.1. bleiben).

Einige Eigenschaften

Sehen wir uns nun einige Properties des Mausrad-Zoom-Werkzeugs an: Es gibt ein AnimationInterval und AnimationsSteps - mit denen kann man eine Animation des Zoom-Effekts erzeugen.

Was ist FixedPoint? Wenn dieser Wert true ist, geht das Zoomen von der Position des Maus-Cursors aus. Wenn man also eine bestimmte Struktur im Chart vergrößern will, kann man hier die Maus auf diese Struktur bewegen und dann das Mausrad drehen. Bei false ist das Zoomen immer auf das Zentrum des Chart bezogen; die Position des Maus-Cursors spielt dann keine Rolle. In diesem Fall muss man aber sehr sorgfältig sein, denn man kann auf diese Weise leicht die Orientierung im Chart verlieren.

Verwendung von ExtentSizeLimit

Wenn man aus einem Chart herauszoomt, wird der Chart immer kleiner, und es werden Bereiche sichtbar, die keine Daten mehr enthalten. Da der Benutzer beliebig weit herauszoomen kann, ist irgendwann der eigentliche Datenbereich des Charts nicht mehr erkennbar. Um das zu verhindern, sollten wir den Achsenbereich so begrenzen, dass auf jeden Fall immer Daten angezeigt werden.

Zu diesem Zweck hat TAChart die Eigenschaft ExtentSizeLimit. Unser Chart erstreckt sich in der x-Richtung zwischen -10 und 10. Daher setzen wir ExtentSizeLimit.XMax auf die Differenz 20 und aktivieren diese Einstellung mit ExtentSizeLimit.UseXMax = true. Jetzt können wir nicht mehr aus dem ursprünglichen x Bereich herauszoomen. Analog sollten wir auch den Bereich der y-Achse auf 2 begrenzen.

Auf dieselbe Weise könnten wir verhindern, dass zu tief in den Chart hineingezoomt wird und die x-Achse einen Bereich von weniger als z.B. 0.01 umfasst. Dafür würden wir entsprechend die Eigenschaften ExentSizeLimit.XMin und ExtentSizeLimit.UseXMin verwenden.

Horizontal and vertical zooming

Why are there two parameters that control the amount of zooming, ZoomFactor and ZoomRatio? This is because the tool can be used for non-proportional zooming: the x zoom factor is given by ZoomFactor alone while the y zoom factor is determined by the product ZoomFactor*ZoomRatio. As long as ZoomRatio=1, zooming occurs isotropically in all directions. When you set ZoomFactor=1 and ZoomRatio=1.1 we leave the x direction unchanged, but zoom only along the y direction. Or, if we set ZoomRatio = 1/ZoomFactor zooming occurs only horizontally along the x axis.

Hey -- these would be nice features for our program! When we look at the keyboard the ⇧ Shift, Ctrl and Alt keys form some kind of coordinate system: Ctrl is the origin, ⇧ Shift is the y direction, Alt is the x direction. So we could assign the ⇧ Shift key to vertical zooming, the Alt key to horizontal zooming, and "no key" to isotropic zooming -- that's easy to remember.

How can we implement this feature? Add two more ZoomMouseWheelTools to the form. The first one will do the vertical zoom, so name it ChartToolset1ZoomMousewheelTool_vert, select ssShift in the Shift property, and set ZoomRatio = 0.90909090909 (which is approximately equal to 1/1.1). The other tool will be for the horizontal zoom, name it ChartToolset1ZoomMousewheelTool_hor, set Shift to ssAlt, and set ZoomFactor = 1.1 and ZoomRatio = 0.90909090909.

When you run the program you may notice that zooming stops working after you have pressed the Alt key. This is caused by the fact that the Alt key plays a special role for menu key handling. To reactivate the program you have to click into the chart. Or select another activation key for the horizontal zoom tool.

Panning by the mouse-wheel

Let's move on the panning. Why don't we use the mousewheel also for panning? Here, panning can go only in one direction -- either x or y. So let us add two TPanMouseWheelTools and replace numbers at the end of their names by "_vert" and "_hor". The tool for vertical panning should be activated by the ⇧ Shift key again, the tool for horizontal panning by the Alt key.

There is a property WheelUpDirection which defaults to pdUp. This means that scrolling of the mouse-wheel is translated to a vertical panning direction. This setting is not correct for the horizontal panning tool, select pdRight or pdLeft instead.

Run the program. When you rotate the mouse wheel with ⇧ Shift or Alt down the chart zooms, but does not pan. What's wrong?

The reason is that we are using the same Shift settings for the zooming and panning tools. Well, we could use, for example, the Ctrl key and assign it additionally to the panning tools. Then vertical panning, for example, would occur by pressing Ctrl+⇧ Shift, vertical zooming would occur with ⇧ Shift alone.

Let's go another way here to demonstrate usage of the Enabled property. Add a toolbar to the form with two buttons to activate either zooming or panning. Rename the first button to ZoomToolbutton and set Down to true. Rename the second button to PanToolbutton. For both buttons, set the following properties:

• Grouped = true
• Style = tbsCheck

and assign their OnClick to the following event handler:

procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
begin
  ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
  ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
  ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;

  ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
  ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
end;

This enables either the zooming or the panning tools, depending on which toolbutton is down. To synchronize the chart tools' Enabled with the buttons' Down you should disable both panning tools (or call ZoomPanToolbuttonClick(nil) in the OnCreate event of the form).

Some observations when you run the program:

• It's a matter of taste, but maybe you feel that the vertical zoom direction is opposite to the direction the mouse wheel is rotated. You can change this by setting the WheelUpDirection of the vertical panning tool to pdDown.
• Empty chart regions without data can become visible again. This is because the ExtentSizeLimit checks only the width and/or height of the extent. To take care of this the PanMousewheelTool has a set of properties LimitToExtent. Activate all options to disallow horizontal and vertical panning beyond the original extent with data.
• Maybe you want to change the speed of panning. This can be done by adapting the Step property.
• You may also notice that it is quite cumbersome to restore the original extent of the chart. It would be fine to have a button "Reset" in the toolbar which undoes any zooming and panning operations. That's easy: add a third button to the toolbar, name it RestoreToolbutton, set its Caption to "Reset", and assign its OnClick event to the following procedure:

procedure TForm1.ResetToolButtonClick(Sender: TObject);
begin
  Chart1.ZoomFull;
end;

The ZoomFull procedure restores the chart extent to its original value. Here's what our program looks like now:

Reading data from the series

You can add more zooming and panning tools to the toolset to get a practical user interface. But we will stop here with the extent tools and move on to the data tools.

Using a TDataPointClickTool

Our task is to read the x,y coordinates of the series underneath the mouse cursor. A neat tool to achieve this is the TDatapointClickTool. Add it to the toolset. Set Shift to ssLeft to activate it by a left button click. And add a TStatusbar to the form where we will display the requested information.

Whenever a click occurs on (or sufficiently near) a data point the relevant data are stored in the tool. For example, there is a Series property which identifies onto which series the click occurred. Similarly, there is a property PointIndex which tells the index of the hit point within its series. The tool provides an OnPointClick event which fires when a point is clicked and from where we can query the requested information. We can use the following event handler to extract the information for displaying in the status bar:

procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
  ATool: TChartTool; APoint: TPoint);
var
  x, y: Double;
begin
  with ATool as TDatapointClickTool do 
    if (Series is TLineSeries) then 
      with TLineSeries(Series) do begin
        x := GetXValue(PointIndex);
        y := GetYValue(PointIndex);
        Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
      end
    else
      Statusbar1.SimpleText := '';  
end;

The parameter ATool passed to the event is rather general, thus we have to type-cast it to TDatapointClickTool to get access to the mentioned properties. Similarly, the Series is of a very basic type as well, another type-cast is needed. Be careful with type-casts, make sure that the class types are correct. Therefore, we check the types by means of is.

When you run the program and click on a data point you will see its coordinates along with the title of its series in the status bar.

Showing permanent labels

Unfortunately, there is no indication where exactly the click occurred. It would be better if we could display a label above the clicked point to show the requested information.

Here we can take advantage of the fact that the series in our chart get their data from TListChartSources. They have no special components on the form, because this is the default behavior, and each TChartSeries (from which TLineSeries inherits) has a non-visual built-in listsource which can be accessed by a (public) property ListSource.

Why is this important? Because the items stored in a listsource provide extra storage for an additional text:

type
  TChartDataItem = object
    X, Y: Double;
    Text: String;
    // ... 
  end;

To modify the Text assigned to a data point at a given index you can call

ListSource.Item[index]^.Text := 'some text';

or, in later versions of Lazarus, there is a SetText method for abbreviation:

ListSource.SetText(index, 'some text');

(You can learn more about list sources from the tutorial on them.)

Since we did not use this feature all Text entries are empty. But when we click onto a data point, we can transfer the coordinate info into the Text member of the ChartDataItem by adding the indicated line to our OnPointClick event handler of the datapoint click tool (BTW, we don't need the status bar any longer, so delete it and remove the corresponding code from the event handler):

procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
  ATool: TChartTool; APoint: TPoint);
var
  x, y: Double;
begin
  with ATool as TDatapointClickTool do
    if (Series <> nil) then
      with (Series as TLineSeries) do begin
        x := GetXValue(PointIndex);
        y := GetYValue(PointIndex);
        { --- next line removed --- }
//        Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
        { --- next line added --- }
        ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
        ParentChart.Repaint; 
        // in newer Lazarus versions you can use (which already contains the Repaint):
        // ListSource.SetText(PointIndex, Format('x = %f'#13#10'y = %f', [x,y]));
      end;
end;

Now we have to make sure that the labels are displayed. For this purpose, the TChartSeries which is an ancestor of TLineSeries has a property Marks. In the sub-properties you find the option Style which is set to smsNone by default, meaning that no labels are displayed. You see in the object inspector that there is a variety of information than can be displayed in the marks, but you'll need here the option smsLabel which shows the text of the ChartDataItems. Another modification may be useful: Set LinkPen.Color to some darker color, otherwise the connecting line between label and data point will not be visible on the white background. You may also want to play with some visual enhancements like CalloutAngle or Shape.

You have to do the same changes for all three series in the chart.

When you run the project and click on the series you get nice permanent labels. Please note that the markers stay in place even if you change the viewport by zooming or panning.

Removing permanent labels

Once in a while you may find that you have clicked at the wrong point and you may want to remove a label.

The basic idea for this feature is as follows: add another TDatapointClickTool, assign it to the right mouse button and, in the OnDatapointClick event handler, we remove the text from the clicked ChartDataItem. Try doing it yourself -- you should now know all the necessary steps.

Related tutorials

• TAChart Tutorial: Getting started: explains how the chart used here is created.
• TAChart Tutorial: ListChartSource, Logarithmic Axis, Fitting: discusses usage of series Marks.
• TAChart Tutorial: ColorMapSeries, Zooming: demonstrates other aspects of zooming and panning, like using the ZoomDragTool, PanDragTool and setting up a zoom history.

Source code

project.lpr

program project1;

{$mode objfpc}{$H+}

uses
  {$IFDEF UNIX}{$IFDEF UseCThreads}
  cthreads,
  {$ENDIF}{$ENDIF}
  Interfaces, // this includes the LCL widgetset
  Forms, Unit1, tachartlazaruspkg
  { you can add units after this };

{$R *.res}

begin
  RequireDerivedFormResource := True;
  Application.Initialize;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

unit1.pas

unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, TAGraph, TASeries, TATools, Forms, Controls,
  Graphics, Dialogs, ComCtrls, types;

type

  { TForm1 }

  TForm1 = class(TForm)
    Chart1: TChart;
    ChartToolset1: TChartToolset;
    ChartToolset1DataPointClickTool1: TDataPointClickTool;
    ChartToolset1DataPointClickTool2: TDataPointClickTool;
    ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool;
    ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool;
    ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool;
    ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool;
    ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool;
    SinSeries: TLineSeries;
    CosSeries: TLineSeries;
    SinCosSeries: TLineSeries;
    ToolBar1: TToolBar;
    ResetToolButton: TToolButton;
    ZoomToolbutton: TToolButton;
    PanToolbutton: TToolButton;
    procedure ChartToolset1DataPointClickTool1PointClick(
      ATool: TChartTool; APoint: TPoint);
    procedure ChartToolset1DataPointClickTool2PointClick(
      ATool: TChartTool; APoint: TPoint);
    procedure FormCreate(Sender: TObject);
    procedure ResetToolButtonClick(Sender: TObject);
    procedure ZoomPanToolbuttonClick(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}


{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);
const
  N = 100;
  MIN = -10;
  MAX = 10;
var
  i: Integer;
  x: Double;
begin
  for i:=0 to N - 1 do begin
    x := MIN + (MAX - MIN) * i / (N - 1);
    SinSeries.AddXY(x, sin(x));
    CosSeries.AddXY(x, cos(x));
    SinCosSeries.AddXY(x, sin(x)*cos(x));
  end;
end;

procedure TForm1.ResetToolButtonClick(Sender: TObject);
begin
  Chart1.ZoomFull;
end;

procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
  ATool: TChartTool; APoint: TPoint);
var
  x,y: Double;
begin
  with ATool as TDatapointClickTool do
    if (Series <> nil) then
      with (Series as TLineSeries) do begin
        x := GetXValue(PointIndex);
        y := GetYValue(PointIndex);
//        Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
        ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
        ParentChart.Repaint;
      end;
end;

procedure TForm1.ChartToolset1DataPointClickTool2PointClick(
  ATool: TChartTool; APoint: TPoint);
begin
  with ATool as TDatapointClickTool do
    if (Series <> nil) then
      with (Series as TLineSeries) do begin
        ListSource.Item[PointIndex]^.Text := '';
        ParentChart.Repaint;
      end;  
end;

procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
begin
  ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
  ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
  ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;

  ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
  ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
end;

end.

unit1.lfm

object Form1: TForm1
  Left = 554
  Height = 284
  Top = 341
  Width = 347
  Caption = 'Form1'
  ClientHeight = 284
  ClientWidth = 347
  OnCreate = FormCreate
  LCLVersion = '1.1'
  object Chart1: TChart
    Left = 0
    Height = 258
    Top = 26
    Width = 347
    AxisList = <    
      item
        Grid.Color = clSilver
        Minors = <>
        Title.LabelFont.Orientation = 900
        Title.LabelFont.Style = [fsBold]
        Title.Visible = True
        Title.Caption = 'y axis'
      end    
      item
        Grid.Color = clSilver
        Alignment = calBottom
        Minors = <>
        Title.LabelFont.Style = [fsBold]
        Title.Visible = True
        Title.Caption = 'x axis'
      end>
    BackColor = clWhite
    ExtentSizeLimit.UseXMax = True
    ExtentSizeLimit.UseXMin = True
    ExtentSizeLimit.UseYMax = True
    ExtentSizeLimit.XMax = 20
    ExtentSizeLimit.XMin = 0.01
    ExtentSizeLimit.YMax = 2
    Foot.Brush.Color = clBtnFace
    Foot.Font.Color = clBlue
    Legend.Alignment = laBottomCenter
    Legend.ColumnCount = 3
    Legend.Visible = True
    Title.Brush.Color = clBtnFace
    Title.Font.Color = clBlue
    Title.Font.Style = [fsBold]
    Title.Text.Strings = (
      'My first chart'
    )
    Title.Visible = True
    Toolset = ChartToolset1
    Align = alClient
    ParentColor = False
    object SinSeries: TLineSeries
      Marks.Format = '%2:s'
      Marks.LinkPen.Color = clGray
      Marks.Style = smsLabel
      Title = 'y=sin(x)'
      LinePen.Color = clRed
    end
    object CosSeries: TLineSeries
      Marks.Format = '%2:s'
      Marks.LinkPen.Color = clGray
      Marks.Style = smsLabel
      Title = 'y=cos(x)'
      LinePen.Color = clBlue
    end
    object SinCosSeries: TLineSeries
      Marks.Format = '%2:s'
      Marks.LinkPen.Color = clGray
      Marks.Style = smsLabel
      Title = 'y=sin(x)*cos(x)'
      LinePen.Color = clGreen
    end
  end
  object ToolBar1: TToolBar
    Left = 0
    Height = 26
    Top = 0
    Width = 347
    Caption = 'ToolBar1'
    EdgeBorders = [ebBottom]
    ShowCaptions = True
    TabOrder = 1
    object ZoomToolbutton: TToolButton
      Left = 1
      Top = 0
      Caption = 'Zoom'
      Down = True
      Grouped = True
      OnClick = ZoomPanToolbuttonClick
      Style = tbsCheck
    end
    object PanToolbutton: TToolButton
      Left = 41
      Top = 0
      Caption = 'Pan'
      Grouped = True
      OnClick = ZoomPanToolbuttonClick
      Style = tbsCheck
    end
    object ResetToolButton: TToolButton
      Left = 69
      Top = 0
      Caption = 'Reset'
      OnClick = ResetToolButtonClick
    end
  end
  object ChartToolset1: TChartToolset
    left = 153
    top = 66
    object ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool
      ZoomFactor = 1.1
    end
    object ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool
      Shift = [ssAlt]
      ZoomFactor = 1.1
      ZoomRatio = 0.90909090909091
    end
    object ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool
      Shift = [ssShift]
      ZoomRatio = 1.1
    end
    object ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool
      Shift = [ssAlt]
      LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
      WheelUpDirection = pdLeft
    end
    object ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool
      Shift = [ssShift]
      LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
      WheelUpDirection = pdDown
    end
    object ChartToolset1DataPointClickTool1: TDataPointClickTool
      Shift = [ssLeft]
      OnPointClick = ChartToolset1DataPointClickTool1PointClick
    end
    object ChartToolset1DataPointClickTool2: TDataPointClickTool
      Shift = [ssRight]
      OnPointClick = ChartToolset1DataPointClickTool2PointClick
    end
  end
end