Delphi graphical components. List of components for displaying graphical information Make a program that plots a given graph of the function y = 10 * sin (x)

Slide 2

"Displaying graphic information in Delphi" Topic outline: Ways of displaying graphic information in Delphi. Displaying pictures. Display of geometric shapes. Construction of graphs and diagrams.

Slide 3

1. Methods for displaying graphic information. In Delphi, there are several ways to display graphical information: Output of pre-prepared images (components Image, Shape); Construction of graphs and charts (Chart component, etc.); Generating images programmatically (Canvas object).

Slide 4

Displaying pictures. We have covered the display of pictures using the Image component in one of the previous topics. Here we will look at an example of implementing the simplest animation by periodically changing the displayed image in the Image components. Go for an example.

Slide 5

Display of geometric shapes. The display of the simplest geometric shapes on a form is provided by the Shape component.

Slide 6

Display of geometric shapes. The main properties of the Shape component:

Slide 7

Display of geometric shapes. Several Shape components can be used to create simple drawings. By programmatically changing the position (.Left, .Top), the size (.Width, .Height) and color (Brush.Color) of the Shape components in the drawing, you can implement elements of the simplest animation. Consider an example.

Slide 8

Construction of graphs and diagrams. Diagrams are intended for a more visual representation of arrays of numerical data, their visual display and analysis. Example. There are several components for building charts in Delphi, one of them is the Chart component (section TeeChart Std).

Slide 9

Construction of graphs and diagrams. View of the Chart component after its installation on the form:

Slide 10

Construction of graphs and diagrams. In addition to the "Object Inspector", access to the properties of the Chart component can be obtained by opening a special dialog window (right button on the \ Edit Chart… component) Add data series Change chart type

Slide 11

Construction of graphs and diagrams. Choosing a chart type:

Slide 12

Construction of graphs and diagrams. Setting properties for the axes (Axis):

Slide 13

Construction of graphs and diagrams. The data for display is usually transferred to the Chart programmatically, for example: Series1.Clear; (clear series) for i: = 1 to N do Series1.addxy (i, A [i], ‘’, clGreen); X-axis value Y-axis value Label along the X-axis Data color on the chart Consider an example of plotting a function y = Sin (x)

Slide 14

Next: Laboratory work No. 13.1. "Display of pictures and geometric shapes, their animation." Task: 1) Develop an application for the implementation of the simplest animation by periodically changing the displayed image in the Image components. (The number of pictures is at least three, you can choose the pictures yourself).

Slide 15

Task: 2) Design and draw a drawing from Shape components. By programmatically changing the position, size or color of the Shape components in the drawing, implement the elements of the simplest animation.

Slide 16

Next: Laboratory work No. 12.2. "Construction of graphs and diagrams." Task: Modify the application from laboratory work No. 9 (Displaying data in a table). Add the ability to display some data from the table on a bar or pie chart. 2) Build a graph of a given function.

View all slides

The Visual Component Library (VCL) Delphi provides us with the following visual components for displaying graphic information: Image (image), PaintBox (window for drawing), DrawGrid (table of figures), Chart (charts and graphs), Animate ( video clip output), as well as Form. These components have a Canvas property (discussed above) that gives access to each pixel. Of course, you don't have to draw pixel by pixel to work with graphics in Delphi, the Delphi system provides powerful tools for working with graphics.

Let's consider the above components in more detail:

Image component (image)

It is an object of the TImage class. Used to display images read from graphic files on the screen. By default, it outputs to the surface of the form images presented in * .bmp format. To display images in jpg format, it is necessary to connect the JPEG unit in the uses directive. Located in the Additional tab of the Component Palette.

After placing the Image component on the form, it takes the form of a selected rectangular area.

Figure 9 - The Image component on the form

To open a dialog for selecting the desired image, do the following using the Object Inspector. To do this, find the Picture property and click on three dots to the left of it. The Picture Editor window opens and in it we select Load, in the opened window we select the image file.

It can also be done programmatically by calling the LoadFromFile method of the Picture property:

Image1.Picture.LoadFromFile ("name_pic.jpeg");

where name_pic.jpeg is the name of the file.

Table 8 - Basic properties of the Image component

Property		Description
		The image displayed in the component field
	Component dimensions. If these dimensions are smaller than the artwork size, and the Strech, AutoSize, and Proportional properties are False, then a portion of the image is displayed.
	Allows you to automatically scale pictures without distortion. To perform scaling, the value of the AutoSize property must be equal to False
	Allows you to automatically scale (shrink or stretch) an image to fit the size of the Image component. If the size of the component is not proportional to the size of the image, then the image will be distorted
	Allows you to automatically resize the component to fit the image
	Allows you to determine the horizontal position of the image in the Image component field if the width of the image is less than the width of the component.
	Surface to display graphics
	Specifies the transparent background color of the image

Example 1: Write a program to view images using the Image component. The program must have the following capabilities:

· View the images in the folder;
· View the image in full size or in the format most suitable for the size of the window;
· Manage image files, as well as print, save, delete and modify images;
· If necessary, open the image in the editing program;

Figure 10 - The program window before it starts

Project creation:

1. Create a folder for the program files and launch the Delphi integrated development environment.
2. Add components to the form:

First, we will place the Image component on the form, the main component with which we will have to work. In addition to him, we need the following components:

· ScrollBox It is necessary when in full-size mode the image will go beyond the Image. We set its Aling property to the value alClient so that its size changes proportionally to the size of the window. And place the Image component on it;
· We will also add the components-dialogs SavePictureDialog and OpenPictureDialog, intended for saving and opening images. We need the first to copy the image to the selected directory, the second to call the dialog for opening a graphic file. They are located on the Dialogs page of the Component Palette. Also from this page we need the PrintDialog component, which we need to call the dialog for choosing a printer for printing.
Add MainMenu to add the main menu to the program and XPManifest for a more colorful design
· We also need to store the names of the images in the working directory somewhere. For these purposes, the ListBox component is convenient, which can be hidden when processing the Create event of Form1.
· To place the navigation buttons and conveniently work with them, add a Veil panel, on which we will place these buttons (Previous image, Next image, True size, Resize, Delete, Copy to, Print, Edit). SpeedButton is selected as a component for them.
· Add a timer to catch the "Left" (previous image), "Right" (next image) and "Del" keys (delete the image).
· And one more component - ProgressBar, which displays the process of loading large * .Jpg files.
3. Write the code for handling the event of pressing the buttons (Previous image, Next image, True size, Resize, Delete, Copy to, Print, Edit). Write the code for handling the event of clicking on the MainMenu menu items (Exit, Open, Close, Create).
4. Specify the initial settings for creating the form. Double-click the free space of the form and write the procedure code procedure TForm1.FormCreate (Sender: TObject), see the module code in Appendix 1.
5. Write procedures of the following type:

procedure FindFileInFolder (path, ext: string);

This routine scans the path folder for files using the ext mask.

The complete listing of the program module code is located in Appendix 1 (Program Listing 3).

1. List the capabilities of the Image component.
2. What class is the Image component of?
3. 3. What type of files does the Image component support by default?
4. 4. List the main properties of the Image component.
5. 5. What property stores the image of the Image component?

"Displaying Graphical Information in Delphi"
Theme plan:
1. Methods of displaying graphic
information in Delphi.
2. Displaying pictures.
3. Display of geometric
figures.

1. Methods for displaying graphic information.
There are several ways in Delphi
displaying graphic information:
Conclusion of pre-prepared
images (Image components,
Shape);
Building graphs and charts
(component Chart, etc.);
Imaging
programmatically (object
Canvas).

2. Displaying pictures.
Displaying pictures using
we examined the Image component in
one of the previous topics.
Here we look at an example
implementation of the simplest animation
by periodically changing
the displayed picture in
Image components.
Go for an example.

Displaying protozoa
geometric shapes on the form
provides a Shape component.

3. Display of geometric shapes.
The main properties of the Shape component:
Brush
Pen
Shape
Color (.Color) and style (.Style) for
filling the shape.
Color (.Color), style (.Style), width
(.Width) and output method (.Mode) of lines
figures.
Geometric shape view.

3. Display of geometric shapes.
From multiple Shape components
you can create simple drawings.
Programmatically changing the position
(.Left, .Top) size (.Width, .Height) and
the color (Brush.Color) of the Shape components
in the figure you can implement
elements of the simplest animation.
Consider an example.

4. Construction of graphs and diagrams.
Diagrams are intended for
better visualization
arrays of numerical data, their
visual display and analysis.
Example.
For charting in Delphi
there are several components,
one of them is the Chart component (section
TeeChart Std).

4. Construction of graphs and diagrams.
View of the Chart component after it
settings on the form:

4. Construction of graphs and diagrams.
In addition to the "Object Inspector", access to
properties of the Chart component, you can
get by opening a special window
dialog (right button on the component \
Edit Chart ...)
Add
data series
Change type
charts

4. Construction of graphs and diagrams.
Choosing a chart type:

4. Construction of graphs and diagrams.
Setting Properties for Coordinate Axes
(Axis):

4. Construction of graphs and diagrams.
The data to display is usually
transferred to the Chart programmatically,
example:
Series1.Clear; (clear batch)
for i: = 1 to N do
Series1.addxy (i, A [i], '', clGreen);
Value by
X-axis
Value by
Y-axis
Signature
X-axis
Data color
on the diagram
Consider a construction example
function graph y = Sin (x)

Further:
Laboratory work No. 13.1.
"Displaying pictures and geometric
figures, their animation ".
Exercise:
1) Develop an application to implement
the simplest animation by periodic
changing the displayed picture in
Image components. (The number of pictures is not
less than three, pick up pictures
on one's own).

Exercise:
2) Come up with and draw a picture from
Shape components. Programmatically
changing position, size or color
Shape components in the figure
to carry out elements of the simplest
animation.

Further:
Laboratory work No. 13.2.
"Construction of graphs and diagrams."
Exercise:
1) Modify app from
laboratory work No. 9 (Display
data in the table). Add opportunity
displaying some data from the table
on a bar or pie chart.
2) Build a graph of a given function.

Theme :
The purpose of the laboratory work Delphi.

Students must learn to:

Create charts

Theoretical part

Pictogram	Name	Page	Appointment
	Image	Additional
	Shape	Additional
	DrawGrid (table of figures)	Additional
	Chart (diagrams and graphs)	Additional
	Paintbox (drawing window)	System

Shape Brush

Image:

Chart:

Method Clear

Method Add

Method AddXY

PaintBox:

Exercise 1

Assignment 2

Assignment 3

with PaintBox1, canvas do

Brush.Color: = clRed;

Pen.Color: = clGreen;

Pen.Style:= psDash;

Pen.Color: = clRed;

Explanation:

Exercise 4

Var i: integer;

Series1.Clear;

for i: = 0 to 22 do

Series1.AddXY (i * 0.29,10 *sin (i * 0.29), ”,clGreen) ;, where i * 0.29 (AXValue) this is an argument and 10* sin (i * 0.29) (AYValue)

y = 3.2 * (14 * x)
y = sin (x)
y = cos (x)
y = x 2 + cos (x)
y = x 2 -4.5 * 4

Exercise 5

with ComboBox1 do begin

Items: = Screen.Fonts;

Save and run the project.

Assignment to work.
Paste the code you wrote

Conclusion on the work done. Theme : Using graphics capabilities.

The purpose of the laboratory work- Get to know the graphics capabilities Delphi.

Students must learn to:

Create any graphic pieces J
Use graphics capabilities
Apply graphics capabilities
Create charts

Theoretical part

Delphi allows you to develop applications that can display graphics: diagrams, drawings, illustrations. To display graphical information, the Delphi library provides components, the list of which is given in the following table:

Pictogram	Name	Page	Appointment
	Image	Additional	Used to display graphics: thumbnails, bitmaps and metafiles
	Shape	Additional	Used to build geometric primitives
	DrawGrid (table of figures)	Additional	Used to create a table in the application that can contain graphics
	Chart (diagrams and graphs)	Additional	Used to create charts and graphs
	Paintbox (drawing window)	System	Used to create some area on the form in which to draw

In addition, you can display and enter graphic information on the surface of any window component that has a Canvas property. Drawings created during the execution of the application can be either motionless or animated.

Shape : only conditionally can be attributed to the means of displaying graphic information, since it simply represents various geometric shapes, appropriately shaded. The main property of this component is Shape, which can take values, Brush(brush) - this property is an object of type TBrush that has a number of subproperties, in particular: the color (Brush.Color) and the style (Brush.Style) of the shape's fill. The third specific property of the Shape component is Pen, which determines the style of the lines.

Image: main properties: Picture - is responsible for loading the image, Stretch - is responsible for the size of the image in the Image component, AutoSize - is responsible for the size of the component into which the image was loaded, taking into account the size of the image.

Chart: To set the displayed values, you must use the methods of the Series. Let's take a look at three of them.

Method Clear clears the series from previously entered data.

Method Add: - Add (Const AValue: Double; Const ALabel: String; AColor: TColor)

allows you to add a new point to the diagram. The AValue parameter corresponds to the added value of the function, and the value of the function argument is filled in automatically, so you do not need to set it, the ALabel parameter is the name that will be displayed on the diagram and in the legend, AColor is the color. The ALabel parameter is optional, you can set it empty: ”.

Method AddXY- AddXY (Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

allows you to add a new point to the graph of the function. The parameters AXValue and AYValue correspond to the argument and function. The ALabel and AColor parameters are the same as in the Add method.

PaintBox: be on the System page. It is a simple canvas window where you can draw arbitrary images. Graphics tools are contained in the Font, Brush and Pen properties. The canvas (canvas) is contained in the Canvas property of the component. The painting itself is programmed in the onPaint event handler.

Exercise 1

Create a program that introduces you to the Image component. It is necessary to place the components: Label, Image, BitBtn, Button. Sign as in the image and upload any image. Adjust the components so that in Image1 the image fits into the frames, and in Image2 the image matches its size. Make tooltips, when you hover over each image, the Hint property is responsible for the hints, to display you need to enter the text and enable the hints in the ShowHint property.

Assignment 2

Increase the size of the shape, and add the following components: Shape, Label. Sign.
Apply styles to each Shape component according to the image:

Assignment 3

For example, let's place the PaintBox component on a form. OnPaint handler:

with PaintBox1, canvas do

Brush.Color: = clRed;

Pie (12,100,140,280,12,100,140,280);

Pen.Color: = clGreen;

Pen.Style:= psDash;

Rectangle (120,60, Width, Height);

Pen.Color: = clRed;

Polyline ();

TextOut (75,20, 'Your text can be here!');

Explanation: The first line sets the fill color: Brush.Color: = clRed; The second draws part of the ellipse: Pie (12,100,140,280,12,100,140,280); The following lines set the parameters of the pen (how the shapes will have a border), width, color and line style: Pen.Width: = 4; Pen.Color: = clGreen; Pen.Style:= psDash; But in this case we will see one solid line, since if the thickness is more than one pixel, the line style will be psSolid (solid). The following line is responsible for drawing the square: Rectangle (120,60, Width, Height); The following command draws a red asterisk: Polyline (); The last line is responsible for the text output: TextOut (75,20, "Your text can be here!");

Exercise 4

1. Make a program that plots a given graph of the function y = 10 * sin (x)

Enlarge the form and place the TChart component on it from the Additional tab, and place the Button, Label component. Stretch the new TChart to a convenient size for development.
We go into the graph editor by double clicking on the component. Editing and customizing the appearance of Series. To do this, click Add and select the Line chart type and click OK. To change the title, press Title and enter the formula y = 10 * sin (x).
Write the code for drawing the chart in the OnClick event of the Button component:

Var i: integer;

Series1.Clear;

for i: = 0 to 22 do

Series1.AddXY (i * 0.29,10 * sin (i * 0.29), ”, clGreen);

Explanation: Method Series1.Clear; clears the series from the previously entered data, so that when updating there are no old values. To draw a graph, you need values, in our case 22 values, at which the graph is drawn by the function Series1.AddXY (i * 0.29,10 *sin (i * 0.29), ”,clGreen) ;, where i * 0.29 (AXValue) this is an argument and 10* sin (i * 0.29) (AYValue) function calculation value, ”(ALabel) the name that will be displayed on the diagram and in the legend can be left blank, and clGreen (AColor) is the line color.

Complete the following task on your own: draw a graph of functions
y = 3.2 * (14 * x)
y = sin (x)
y = cos (x)
y = x 2 + cos (x)
y = x 2 -4.5 * 4

Exercise 5

Create an application that allows you to view the characters in the system fonts.
Enlarge the shape, place DrawGrid1, ComboBox1, Label. Set the following properties for the DrawGrid1 component: RowCount = 7, ColCount = 32, FixedCols = 0, FixedRows = 0, DafaultColWidth = 20, DefaultRowHeight = 20.
To redraw the contents of each cell, create an OnDrawCell event handler for the DrawGrid1 component. To display the font characters, we will use the Canvas property of the DrawGrid1 component. We directly need the TextRect method of the Canvas property. This method is used to display text information in a specific cell. The event handler will look like this:

DrawGrid1.Canvas.textrect (rect, Rect.Left, Rect.Top, char ((ARow + 1) * 32 + acol));

Save the project. Make sure that the cells in the table display the characters in the default system font.
To select a font, we will use the ComboBox1 component. In order for this component to contain all screen fonts, it is necessary to add them to the list when creating the form. The names of all screen fonts can be found using the Screen global variable of type TScreen. This variable is automatically added to all Delphi applications. The Screen variable contains information about the current state of the application screen: names of forms and data modules used by the application; data about the active form and the components used by this form; the size and resolution of the screen used; information about the cursors and fonts available to the application. Information about the fonts available to the application is contained in the Font property of the Screen variable.
Create an onCreate event handler for the form and add statements to it:

with ComboBox1 do begin

Items: = Screen.Fonts;

ItemIndex: = Items.IndexOf (Font.Name);

Save and run the project. The DrawGrid1 component contains the characters of the font set in ComboBox1.
In order to bind the value of the font name for DrawGrid1 and ComboBox1, let's create another event handler:

DrawGrid1.Font.Name:=ComboBox1.Text;

Save and run the project.

Number, topic, purpose of the laboratory work.
Assignment to work.
Description of input, intermediate and result data with indication of their type.
Program in the programming language.
Program execution result (Entered data and received data)
Paste the code you wrote
Conclusion on the work done.

To display graphic information in the Delphi library, components are provided, the list of which is given in table. 6.

Table 6

Graphics Display Components

Component	Page	Description
Image	Additional	Used to display graphics
PaintBox (window for drawing)	System	Used to create some area on the form in which to draw
DrawGrid (table of figures)	Additional	Used to display non-text data in rows and columns
Chart (charts and graphs)	Additional	The component belongs to the TeeChart family of components that are used to create charts and graphs
Chartfx (charts and graphs)	ActiveX	Diagrams and graphs editor
FIBook (Excel Pages)	ActiveX	Component for input and processing of numerical information
VtChart (charts)	ActiveX	Charting window

In addition, graphical information can be displayed and entered on the surface of any window component that has the property Canvas- canvas.

Image Tables - DrawGrid and StringGrid Components

Component DrawGrid used to create a table in an application that can contain graphics. This component is similar to the component StringGrid, since the latter is derived from DrawGrid. Therefore, in DrawGrid all properties, methods, events of the component are present StringGrid, except for those related to the text, i.e. apart from properties Cells, Cols, Rows, Objects. From this point of view, the component StringGrid has significantly greater capabilities than DrawGrid, since it can store both images and texts in cells. And if you want to add text to some cells DrawGrid, then you will need to use the methods of outputting text to the canvas for this, which is not very convenient.

Components DrawGrid and StringGrid have a canvas Canvas, on which you can post images.

There is a method Cell-Rect, which returns the canvas area for the given cell. This method is defined as

function CellRect (ACol, ARow: Longint): TRect;

where ACol and ARow- column and row indices, starting at 0, at the intersection of which the cell is located. The area returned by this function is the canvas area in which you can draw the desired image. For example, the operator

DrawGridl.Canvas.CopyRect (DrawGridl.CellRect (1,1),

BitMap.Canvas, Rect (0,0, BitMap.Height, BitMap.Width));

copy method CopyRect to cell (1,1) of the table DrawGridl image from component BitMap. This cell is the second from the left and the second from the top in the table, since the indices start at 0. Note that if the cell is smaller than the size of the copied image, then only the top left of the image will appear in the cell.

Component Canvas Image DrawGrid and StringGrid, As with the canvas of any component, it is subject to erasure when the application window is covered by other windows or, for example, when the application is minimized.

A convenient way to enter images into cells DrawGrid is the use of an event handler OnDrawCell. These events occur for each cell of the table at the time of its redrawing. The handler header looks like this:

procedure TForml.DrawGridlDrawCell (Sender: TObject;

ACol, ARow: Integer; Rect: TRect; State: TGridDrawState)

Parameter State indicates the state of the cell. It is a set that can contain the following elements: gdSelected- selected cell, gdFocused- the cell in focus, gdFixed- a cell in a fixed area of the table. Parameter State can be used to display different types of cells in different states.

Shape component

Shape component can only conditionally be attributed to means of displaying graphic information, since it simply represents various geometric shapes, appropriately shaded. The main property of this component is Shape(form), which can take on the following values:

StRectangle - rectangle;

StSquare - square;

StRoundRect - rounded rectangle;

StRouhdSquare - square with rounded corners;

StEllipse - ellipse;

StCircle is a circle.

Another essential property of a component is Brush(brush). This property is an object of type TBrush, having a number of subproperties, in particular color (Brush.Color) and style (Brush.Style) fill the shape. You can see the fill at some Style values in Fig. 3.2. The third specific property of a component Shape- Pen(pen) defining the line style.

Chart component

Now consider the component Chart. This component allows you to build various charts and graphs that look very impressive. Component Chart has many properties, methods, events, so if all of them are considered, then this would have to devote a whole chapter. Therefore, we will restrict ourselves to considering only the main characteristics Chart. For the rest, you can check out Delphi's built-in help, or just try them out by experimenting with diagrams.

Component Chart is a container of objects Series- class heirs TChartSeries. Each such object represents a series of data characterized by a certain display style: one or another graph or chart. Each component Chart may include several episodes. If you want to display a graph, then each series will correspond to one curve in the graph. If you want to display charts, for some types of charts it is possible to overlap several different series, for others (for example, for pie charts) it will probably look ugly. However, even in this case, you can set for one component Chart several series of the same data with different chart types. Then, by making one of them active at each moment of time, you can provide the user with a choice of the type of chart that displays the data of interest.

Place one or two components Chart on the form and look at the properties opened in the Object Inspector. Let us give an explanation of some of them.

AllowPanning - defines the ability of the user to scroll the observed part of the graph at runtime by pressing the right mouse button. Possible values: pmNone - scrolling is prohibited, pmHori / ontal, pm Vertical or pmBoth - scrolling is allowed, respectively, only in the horizontal direction, only in the vertical direction, or in both directions.

AhowZoom - allows the user to change the image scale at runtime by cutting out parts of the diagram or graph with the mouse cursor. If the frame of a fragment is drawn to the right and downward, then this fragment is stretched to the entire field of the chart. And if the frame is drawn up and to the left, then the original scale is restored.

Title - defines the title of the chart.

Foot - defines the caption below the diagram. None by default. The signature text is defined by the Text subproperty.

Frame - defines a frame around the chart.

Next to many of the listed properties in the Object Inspector, there are ellipsis buttons that allow you to call one or another page of the Diagram Editor - a multi-page window that allows you to set all the properties of diagrams. Calling the Diagram Editor is also possible by double-clicking on the component Chart or by right-clicking on it and choosing Edit Chart from the pop-up menu.

Double click the top component Chart. You will be taken to the Chart Editor window on the Chart page, which has several tabs. First of all, you will be interested in the Series tab on it. Click on the Add button - add a series. You will be taken to a window where you can select the type of chart or graph. In this case, select Pie - a pie chart. Using the Titles tab, you can set the title of the diagram, the Legend tab allows you to set the parameters for displaying the diagram legend (list of symbols) or even hide it from the screen, the Panel tab determines the appearance of the panel on which the diagram is displayed, the 3D tab allows you to change the appearance of your diagram: tilt, shear, thickness, etc.

When you are working with the Chart Editor and have selected a chart type, in the components Chart your form displays its view with conditional data entered into it. Therefore, you can immediately observe the result of applying various options to your application, which is very convenient.

The Series page, which also has a series of tabs, allows you to select additional characteristics for the display of the series. In particular, for a pie chart on the Format tab, it is useful to enable the Circled Pie option, which will ensure that the chart is displayed in the form of a circle at any size of the Chart component. On the Marks tab, the buttons of the Style group determine what will be written on the labels related to individual chart segments: Value - value, Percent - percent, Label - data names, etc.

You can, if you like, add another identical series to this Chart component by clicking the Clone button on the Series tab of the Chart page, and then for this new series, click the Change button and select a different chart type, for example Bar.

Exit the Chart Editor, select the lower Chart component in your application and re-set properties for it using the Chart Editor. In this case, you will need to specify two series, if you want to display two curves on the chart, and select the Line chart type. Since we are talking about graphs, you can use the Axis and Walls tabs to define the coordinate characteristics of the axes and 3D edges of the graph.

This completes the design of the application's appearance. The only thing left to do is write the code that specifies the data you want to display. For our test application, let's just set some constant data in the pie chart, and some functions in the graphs.

To set the displayed values, you must use the methods of the Series. Let's dwell on only three main methods.

Method Clear clears the series from previously entered data.

Method Add:

Add (Const AValue: Double; Const ALabel: String; AColor: TColor),

allows you to add a new point to the diagram. Parameter AValue matches the added value, parameter ALabel- a label that will be displayed on the diagram and in the legend, AColor- Colour. Parameter ALabel- optional, it can be set empty: ‘’. Method AddXY:

AddXY (Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

allows you to add a new point to the graph of the function. Options AXValue and AYValue correspond to an argument and a function. Options ALabel and AColor the same as in the method Add.

Thus, the procedure for loading data in our example can be as follows:

const Al = 155; A2 = 251; A3 = 203; A4 = 404; var i: word; begin

With Seriesl do begin

Add (Al, "Shop l", clYellow);

Add (A2, "Shop 2", clBlue);

Add (A3, "Shop 3", clRed);

Add (A4, "Shop 4", clPurple); end;

Series2.Clear; SeriesS.Clear; for i: = 0 to 100 do begin

Series2.AddXY (0.02 * Pi * i, sin (0.02 * Pi * i)

SeriesS.AddXY (0.02 * Pi * i, cos (0.02 * Pi * i) end;

ClRed); , clBlue);

Operators Clear are needed if you intend to update data while the application is running.