The task of generating a two-dimensional graph may initially seem complicated when you look at the Cartesian graph components and their numerous options. A walkthrough of a small example program is thus offered as a usage demonstration. The sample program draws the sine and cosine functions in the range 0-360° as 0-2π:
First, the data to be generated is assessed: the X-data values of the sine and cosine functions will be the same, while sine and cosine will have different function (Y) values for different values of X.

Now create a new project in the IDE and name the form GraphExample. Open the "Rt-Graph2D" palette and place three   TRtDoubleVector components on the form.
Using the object inspector, rename these to AngleVector, SineVector and CosineVector. Save the form as "ExampleGraph" and the project as "GraphTest".

Now place a  TRtGraph2D component on the form and adjust it to fit. On creation, the graph contains two axes: XAxis1 (with Caption X-Axis) and YAxis1 (with Caption Y-Axis).

Now change the names and captions of the axes. The x-axis is modified by clicking on it and editing the corresponding Name to read AngleAxis and the Caption to read Angle/Radiant within the object inspector. Do the same for the y-axis, setting Name to FunctionAxis and Caption to Sine and Cosine.

With the graph now visible, add data points to display on it to demonstrate the sine and cosine functions. To do this, place two  TRtPointSeries components on the form. Set their names to SinSeries and CosSeries and the captions to Sine and Cosine, respectively.

Within the form, select both series components. In the object inspector, set the XData property to AngleVector.

Select the SinSeries component and set the YData property to SineVector.

Analogously, select the CosSeries component and set the YData property to CosineVector. Since you will want to have different symbols and lines for the series, set the Line.Color to Green and the PointSymbol.FillColor to Transparent.

To assist you in finding the most appropriate line and point settings, the graph will show some random points representing each series. Your graph should now look similar to the graph displayed on the left.

Since with this example you want to display the sine and cosine functions, you need to implement a method to fill the data vectors mentioned above. The simplest way to do this is by placing a TButton component to the form and then setting the OnClick event to the following procedure:

procedure TGraphExample.Button1Click(Sender: TObject);
// adds sine and cosine function values every 10°
var i, NextIdx: integer; AngleAsRad: Double;
begin
  for i := 0 to 36 do
  begin
    // using NextIdx instead of i. Clicking twice will extend graph
    NextIdx := AngleVector.Count;
    AngleAsRad := DegToRad(NextIdx*10);
    AngleVector[NextIdx] := AngleAsRad;
    SineVector[NextIdx] := Sin(AngleAsRad);
    CosineVector[NextIdx] := Cos(AngleAsRad);
  end;
end;
 

As you see, the data vectors can be handled as if they are zero based arrays of double. But writing to it, you must not take care for the size of the array. This is adjusted automatically by the TRtDoubleVector component.

If you want to compile the project and run it, please click "Button1". Your output should look like the image on the left.

Another way to access the data is to treat it as a list of doubles. This is described in the example with the OnClick event of a second button. On clicking this button, the graph is extended by one point.

procedure TGraphExample.Button2Click(Sender: TObject);
// adds additional points 10° after the last
var AngleAsRad: Double;
begin
  AngleAsRad := DegToRad(AngleVector.Count*10);
  AngleVector.Add(AngleAsRad);
  SineVector.Add(Sin(AngleAsRad));
  CosineVector.Add(Cos(AngleAsRad));
end;

You might want a legend for the series, showing line styles and captions. Do this by adding a  TRtLegend component to the graph. Set the Position property to TopCenterOfGraph then you can generate the output shown on the left.

As you can see, it takes only a few minutes to create a fully working graph program.

More Information see PDF-Manual(2.08MB).

Copyright © 2018 Horst Reichert all rights reserved
webmaster@rt-science.com