The Chart control comes as a complete application in its own right, distinct from Delphi, written in VCL by an independent developer. It is an add-in module with lots of functionality and an option to buy the 'Pro' version. It is a good example of what can be achieved with a programming tool like Delphi, extending the core functionality of the product. There are related icons in the DataControls Palette, where the DBChart icon is located, and the QReport palette where the QRChart icon can be found.
The TeeChart application includes its own wizard, which can be found from File/New/Other and choosing the Business tab. This wizard helps you to add a chart to a form - for full details see the TeeChart and TChart entries in Delphi Help.
To get started with charts add a chart control to a form and double click the empty chart object to invoke the chart editor. Click the Add button and choose a pie chart from the options available (choose 2D charts for now).
You should now have something like this:
The code Delphi has created for the form now includes these items:
type
TForm1 = class(TForm)
Button1: TButton;
Button2: TButton;
Chart1: TChart;
Series1: TPieSeries;
procedure Button1Click(Sender: TObject);
procedure Button2Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
Also, the Chart unit has been add to the uses clause, along with TeeProcs, TEngine and Series.
Now add a button to the form and enter this code:
With Series1 do
Begin
Add( 20, 'Sportsl' , clRed ) ;
Add( 70, 'Saloon', clBlue ) ;
Add( 10, 'Estate', clGreen ) ;
end;
Run the program and click the button to bring up the chart:
The Add procedure is found in the Series unit.
Now we can add another series, this time for a bar graph, and a little extra functionality:
With Series2 do
begin
Clear; {Where Series1 is your Bar series}
Add( 25 , 'Nissan' , clTeeColor );
Add( 50 , 'Ford' , clTeeColor );
Add( 30 , 'Vauxhall' , clTeeColor );
Add( 50 , 'Renault' , clTeeColor );
Add( 40 , 'Toyota' , clTeeColor );
Add( 35 , 'Rover' , clTeeColor );
end;
The two buttons allow us to switch between the Pie Chart and the Bar Chart. The code for each chart includes a line to clear the chart of the other series:
series1.clear;
If we do not clear a series we will have one chart superimposed on another, which may be the desired effect.
These example use only Y coordinate values, the X value is nil. We could have used the AddY procedure in the code in place of plain Add. Where a data point has an X component as well we use the AddXY procedure:
If we add one of each of the data series from the chart editor we can see what basic types are available:
type
TForm1 = class(TForm)
Button1: TButton;
Button2: TButton;
Chart1: TChart;
Series1: TPieSeries;
Series2: TBarSeries;
Button3: TButton;
Series3: TLineSeries;
Series4: THorizBarSeries;
Series5: TAreaSeries;
Series6: TPointSeries;
Series7: TFastLineSeries;
Series8: TChartShape;
Series9: TGanttSeries;
Series10: TArrowSeries;
Series11: TBubbleSeries;
You can now look up implementation details for any of these types in the Help files (look under the Series unit). Adding each different series adds another unit to the uses clause.
We can now add a Point (X-Y) series and a button to display it. We know that a point (X-Y) chart will need both X and Y values so we use the AddXY procedure:
procedure TForm1.Button4Click(Sender: TObject);
begin
series1.Clear;
series2.clear;
series3.clear;
With Series3 do
begin
AddXY( 10, 40);
AddXY( 20, 50);
AddXY( 30, 60);
AddXY( 40, 70);
AddXY( 50, 80);
AddXY( 60, 90);
end;
end;
Before we display the new charts we will turn off the Legend in the Chart Editor (Chart tab, Legend page).
Having seen how point can be incorporated into a chart we could obtain the data from a file, perhaps entered from a StringGrid control or a ValueListEditor control. Using techniques we have seen in the ComboBox and the StringGrid sections we can use a StringGrid to input numbers and save them in a file:
The data type for the x and y values is defined as follows:
Txydata=string[6];
Further details of this part of the application can be found in the section on the StringGrid component.
The data in the example above produces this chart (not very interesting!):
We could have placed the StringGrid on the same form as the chart and updated the chart directly from it, or from a StringGrid on a separate form.
We now need to learn how to format the chart. The following code gives an example of how to use the Add method with chart properties to add items to a chart:
procedure TForm1.add_title(chart1: tchart);
begin
with chart1.Title.Text do
begin
Clear;
Add(Edit1.text);
end;
Chart1.Repaint;
end;
This copies whatever the user puts into the Edit box into the chart title field.
If you need to include a chart facility in an application you could include the Chart control. On the other hand you could use the canvas drawing tools to construct your own routines...
This provides a way of entering and saving data for use with charts.
A data type is set up in the type section of the Interface part (above the form class declaration will do):
Txydata=string[6];
The stringgrid labels are set up as follows:
procedure TForm4.FormCreate(Sender: TObject);
begin
StringGrid1.Cells[0,0]:='Row Pairs';
StringGrid1.Cells[1,0]:='X Value';
StringGrid1.Cells[2,0]:='Y Value';
end;
The user can enter data into the string grid and a new or amended data file can be created:
procedure TForm4.SaveButtonClick(Sender: TObject);
var
xydatarecord:Txydata;
xydatafile:file of Txydata;
i:integer;
x,y: Txydata;
begin
assignfile(xydatafile,'xyfile1.dat');
reset(xydatafile);
for i:= 1 to stringgrid1.RowCount - 1 do
begin
x:=StringGrid1.Cells[1,i];
y:=StringGrid1.Cells[2,i];
write (xydatafile, x);
write (xydatafile, y);
end;
closefile(xydatafile);
end;
And an existing data file can be read:
procedure TForm4.LoadButtonClick(Sender: TObject);
var
xydatafile:file of Txydata;
i:integer;
x,y: Txydata;
begin
assignfile(xydatafile,'xyfile1.dat');
reset(xydatafile);
i:=1;
while not eof (xydatafile) do
begin
read(xydatafile,x);
read(xydatafile,y);
stringgrid1.Cells[1,i]:=x;
stringgrid1.Cells[2,i]:=y;
inc(i);
end;
closefile(xydatafile);
end;
We can now use this data in an amended routine:
procedure TForm1.Button4Click(Sender: TObject);
var
xydatafile:file of Txydata;
x,y: Txydata;
begin
series1.clear;
series2.clear;
series3.clear;
assignfile(xydatafile,'xyfile1.dat');
reset(xydatafile);
while not eof (xydatafile) do
begin
read(xydatafile, x);
read(xydatafile, y);
series3.AddXY(strtofloat(x), strtofloat(y));
end;
closefile(xydatafile);
end;
The form shown above is a subsidiary form to the main one where the chart is located.