Judul

Spesifikasi:
Ukuran: 14x21 cm
Tebal: 358 hlm
Harga: Rp 53.800
Terbit pertama: November 2004
Sinopsis singkat:

Membangun suatu sistem akuisisi besaran analog mutlak memerlukan perangkat lunak (software) yang
khusus agar sesuai kebutuhan analisis. Saat ini sudah banyak perangkat lunak untuk menganalisis sinyal-sinyal
hasil pengukuran (software) yang dijual. Melalui buku ini, penulis mencoba membangun sebuah perangkat
lunak (software) yang dapat Anda gunakan untuk keperluan akuisisi data.
Sistem akuisisi data yang dibangun berbasis pada database dengan pernyataan Local SQL. Data masukan
dapat diatur agar berasal dari antarmuka ADC, ditampilkan secara online dalam bentuk grafik dengan
komponen TChart, dan juga dalam bentuk teks. Data tersebut dapat disimpan dalam suatu file database,
dicari nilai statistiknya, dan dicetak. Dengan mengganti sumber data, sistem akuisisi data ini juga dapat
diterapkan dalam bidang lain, misalnya ekonomi.
Buku ini juga menyertakan topik-topik tambahan yang berhubungan dengan akuisisi data secara grafis dengan
komponen TChart, TDBChart, atau Timage, dan membuat file setup suatu aplikasi.

BAB 3

BEBERAPA TOPIK TAMBAHAN
UNTUK SUATU APLIKASI

Topik-topik tambahan yang akan dipaparkan berikut ini adalah
untuk suatu aplikasi akuisisi data dengan komponen TChart.
Beberapa topik dapat ditambahkan dalam setting program aplikasi
Sistem Akuisisi Data pada Bab 2 dan sebagian yang lain
merupakan aplikasi tambahan yang dapat diterapkan pada
aplikasi yang lain. Manfaatkan form FOtherDemo (tersimpan
dalam unit UOtherDemo) yang telah dibuat pada Bab 1 untuk
menampung topik-topik tersebut. Untuk membuat suatu topik,
dibuat form baru.

3.1 Mendesain Form FOtherDemo
Pada form FOtherDemo, letakkan sebuah komponen TImage, 2
(dua) buah komponen TGroupBox, 2 (dua) buah komponen
TLabel, 4 (empat) buah komponen TSpeedButton, dan 10
(sepuluh) buah komponen TRadioButton. Kemudian, ubahlah
property komponen-komponen tersebut seperti tabel berikut ini
(untuk property yang mempunyai nilai lebih dari satu, masing-

169

masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkan
urutan property Name):
Nama Object Nama Property Nilai
TForm AutoSize True
BorderStyle bsNone
Name FOtherDemo
Position poScreenCenter
Timage (tab AutoSize True
Additional)
Name IOtherDemo
Picture Klik ganda sel disebelah
kanan property ini, load
gambar IOtherDemo.jpg
TgroupBox Caption Expand; Features
(tab Standard)
Color clWhite
sebanyak 2
buah Font.Color clRed

Font.Name Arial
Font.Size 9
Font.Style.fsBold True
Height 91; 154
Name GBExpand; GBFeatures
Visible False
Width 190
Tlabel (tab AutoSize True; False
Standard)
Caption Read this : ; (bebas)
sebanyak 2
buah. Pasang Font.Color clRed; clBlack
pada form
Font.Name Arial

170

Font.Size 8

Font.Style.fsBold True; False
Height 14; 103
Left 138; 146
Name Label1; LNotes
Top 215; 233
Transparent True
Width 57; 201

WordWrap False; True
TSpeedButton Caption (kosongkan); Expand...
(tab Form; Features...; Show me
Additional) The Demo !
sebanyak 4
Cursor crHandPoint
buah. Pasang
dalam form Flat True
Font.Color (bebas); clYellow; clYellow;
clBlue
Font.Name Arial
Font.Size 9
Font.Style.fsBold True
Glyph Klik ganda sel disebelah
kanan property ini, load
gambar BExit.bmp;
(kosongkan untuk selain
BClose)
Height 12; 18; 18; 18
Left 346; 10; 10; 216
Margin -1; 5; 5; 5

171

Name BClose; BExpand;
BFeatures; Bshow
Top 1; 27; 47; (bebas)
Width 12; 127; 127; 129
TradioButton Caption Cross Hair; Keyboard
(tab Standard) Scrolling; Property
sebanyak 3 BackImage
buah. Pasang
Checked True; False; False
pada
GBExpand Color clWhite
Left 18
Name RCrossHair; RKeyboard;
RBackImage
Top 24
TradioButton Caption Digital Chart; Fast Line
(tab Standard) Series; Linked Tables; Mini
sebanyak 7 Small Charts; Property
buah. Paging; Statistical Bar
Series; Osiloscope with
Pasang pada
TImage
GBFeatures
Checked False untuk selain RDigital
Color clWhite
Left 18
Name RDigital; RFastLine;
RLinked; RMini; RPaging;
RStatistic; ROsciloscope
Top 24; 41; 58; 75; 92; 110; 128

Biarkan nilai-nilai property yang lain sesuai nilai default-nya.

172

Prosedur Event OnMouseDown pada TImage (IOtherDemo)
Form FOtherDemo tidak dapat digeser karena property
BorderStyle bernilai bsNone. Untuk mengatasinya, buat event
OnMouseDown pada komponen TImage. Klik ganda sel di sebelah
kanan event OnMouseDown komponen tersebut dan ketikkan
kode programnya.
procedure TFOtherDemo.IOtherDemoMouseDown(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
ReleaseCapture;
TWinControl(FOtherDemo).Perform(WM_SysCommand, $F012, 0);
end;

Prosedur Event OnClose pada TForm (FOtherDemo)
Prosedur event OnClose berguna untuk menangani kejadian pada
saat form ditutup, yaitu menampilkan kembali form FMainDemo
yang telah disembunyikan saat form ini dibangkitkan. Pada tab
event TForm, klik ganda sel di sebelah kanan OnClose dan ketik
kode programnya.
procedure TFOtherDemo.FormClose (Sender: TObject; var Action:
TCloseAction);
begin
FMainDemo.Show;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BClose)
Komponen TSpeedButton BClose berfungsi untuk menutup form
FOtherDemo kemudian menampilkan kembali form FMainDemo
(yaitu memanggil prosedur event OnClose yang telah dibuat). Klik
ganda sel di sebelah kanan event OnClick komponen tersebut
kemudian ketikkan prosedur Close pada prosedur BCloseClick.
procedure TFOtherDemo.BCloseClick (Sender: TObject);
begin
Close;
end;

Prosedur Event OnCreate pada TForm (FOtherDemo)
Posisi beberapa komponen yang terpasang dalam form
FOtherDemo dapat ditentukan dalam prosedur event OnCreate.

173

Pada tab event TForm, klik ganda sel di sebelah kanan OnCreate
dan ketikkan kode program berikut ini.
procedure TFOtherDemo.FormCreate(Sender: TObject);

procedure Position(AOwner: TControl; ax,ay : integer);
begin
AOwner.Left:= ax;
AOwner.Top:= ay;
end;
begin
Position(GBExpand, 157, 22);
Position(GBFeatures, 157, 22);
ButtonClick(BExpand);
end;

Prosedur lokal Position digunakan untuk meringkas penulisan
posisi kiri dan atas beberapa komponen dan prosedur ButtonClick
dengan sender BExpand menyebabkan komponen TGroupBox
GBExpand beserta komponen yang terpasang di dalamnya
ditampilkan ketika form pertama kali dibangkitkan. Jika
menginginkan keadaan tersebut terjadi setiap kali form dipanggil,
deklarasikan dalam event OnShow form.

Prosedur Event OnClick pada Komponen TSpeedButton (BExpand
dan BFeatures)
Menu-menu yang ada dalam form FOtherDemo terbagi dalam
kelompok Expand dan Features. Kelompok pertama berisi menu
yang dapat ditambahkan dalam setting program aplikasi Sistem
Akuisisi Data yang telah dibuat dan menu yang kedua berisi topik
untuk membuat aplikasi lain. Manfaatkan komponen
TSpeedButton BExpand dan BFeatures untuk menampilkan menu-
menu dalam komponen TGroupBox. Blok kedua komponen
TSpeedButton tersebut, isi sel di sebelah kanan event OnClick
dengan nama prosedur ButtonClick kemudian tekan tombol Enter.
procedure TFOtherDemo.ButtonClick(Sender: TObject);
begin
GBExpand.Visible:= False;
GBFeatures.Visible:= False;
if Sender = BExpand then begin
GBExpand.Visible:= True;
BShow.Top:= 124;
end else begin
GBFeatures.Visible:= True;
BShow.Top:= 184;
end;

174

end;
Kelompok menu dalam komponen TGroupBox akan ditampilkan
berdasarkan sender prosedur ButtonClick, termasuk posisi atas
komponen TSpeedButton BShow.

Prosedur Event OnMouseMove pada Semua Komponen
Komponen TLabel LNotes berfungsi untuk menginformasikan
keterangan suatu komponen ketika mouse bergerak di atas
komponen tersebut melalui event OnMouseMove. Blok semua
komponen yang tertampung dalam form FOtherDemo, isi pada sel
sebelah kanan tab event OnMouseMove dengan nama prosedur
Notes, lalu tekan tombol Enter.
procedure TFOtherDemo.Notes(Sender: TObject; Shift: TShiftState;
X,
Y: Integer);
begin
LNotes.Caption:= '';
if Sender = BExpand then
LNotes.Caption := 'Merupakan ekspansi setting program, '+
'seperti Cross Hair, kontrol scrolling grafik dengan '+
'tombol Keyboard, dan mengubah property BackImage '+
'komponen TChart.';
if Sender = BFeatures then
LNotes.Caption := 'Feature yang dapat diterapkan dalam '+
'suatu aplikasi, terdiri atas : Digital Chart, Ploting '+
'data Series bertipe Fast Line, Akses database dengan '+
'komponen TTable, Mini Chart yang Resizeable, ‘+
‘Property Paging, Nilai Statistik dalam TChartSeries, '+
'dan membuat Osciloscope dengan komponen TImage.';
if Sender = RCrossHair then
LNotes.Caption := 'Membuat garis Cross-Hair pada grafik.';
if Sender = RKeyboard then
LNotes.Caption := 'Mengontrol proses zoom dan scrolling '+
'grafik dengan menggunakan tombol-tombol Keyboard.';
if Sender = RBackImage then
LNotes.Caption := 'Mengeset gambar background grafik '+
'(property BackImage).';
if Sender = RDigital then
LNotes.Caption := 'Simulasi plot data digital pada grafik.';
if Sender = RFastLine then
LNotes.Caption := 'Mengukur kecepatan plot data pada
TChartSeries bertipe Fast Line.';
if Sender = RLinked then
LNotes.Caption := 'Menghubungkan TChartSeries komponen '+
'TDBChart dengan dataset komponen TTable.';
if Sender = RMini then
LNotes.Caption := 'Membuat grafik mini yang dapat diubah '+
'ukurannya mengikuti perubahan ukuran form dan membuat '+
'garis divider vertikal pada suatu TChartSeries.';
if Sender = RPaging then
LNotes.Caption := 'Membagi grafik dalam halaman tertentu '+

175

'dan scrolling grafik per halaman.';
if Sender = RStatisticBar then
LNotes.Caption := 'Membuat nilai statistik pada '+
'TChartSeries dan membuat TChartSeries '+
'bertipe Bar secara run-time.';
if Sender = ROsciloscope then
LNotes.Caption := 'Membuat sistem pengukuran data dengan'+
'menggunakan komponen TImage.';
end;

Jika mouse berada di atas komponen yang menjadi sender
prosedur Notes, property Caption komponen LNotes akan
menampilkan keterangan untuk setiap komponen tersebut. Jika
berada di luar komponen-komponen tersebut, tidak ada teks yang
ditampilkan.

3.2 Membuat Garis Cross-Hair
Garis Cross-Hair merupakan garis silang pada „kotak‰ grafik
ketika mouse berada di atas grafik tersebut dan posisinya akan
berubah mengikuti perubahan posisi mouse. Garis Cross-Hair
dapat dipakai untuk mengetahui nilai suatu titik dalam grafik.
Buatlah sebuah form baru dengan nama FCrossHair dan simpan
nama unit dalam UCrossHair. Pada form tersebut, pasang sebuah
komponen TChart, komponen TLabel, komponen TPanel,
komponen TCheckBox, dan sebuah komponen TspeedButton,
kemudian ubah property-nya seperti tabel berikut ini.
TForm AutoSize True
BorderStyle bsToolWindow
Name FCrossHair
TLabel (tab Left 205
Standard).
Name LValues
Pasang pada
komponen Top 36

176

TChart Transparent True

TPanel (tab BevelOuter bvNone
Standard)
Color clWhite
Height 40
Left 0
Name Panel1
Top 407
Width 540
TCheckBox Caption &Cross Cursor
(tab Standard).
Checked True
Pasang dalam
Left 15
Panel1
Name CCross
Top 15
TSpeedButton Caption Cross-Hair Color
(tab
Cursor crHandPoint
Additional).
Flat True
Pasang dalam
Panel1 Height 22

Left 200
Name BColor
Top 10

Width 135

Biarkan property yang lain sesuai nilai default-nya. Untuk
mengedit property komponen TChart, klik ganda komponen
tersebut sehingga muncul kotak dialog seperti Gambar 1.1. Buat

177

sebuah TChartSeries bertipe Line dua dimensi (tanda centang
pada parameter 3D dihilangkan) dengan nama Series1 dan ubah
nilai beberapa property lain sesuai kebutuhan.
Deklarasikan beberapa variabel pada bagian public unit dengan
tipe data seperti berikut ini:
public
{ Public declarations }
OldX, OldY: Longint;
CrossHairColor: TColor;
CrossHairStyle: TPenStyle;
end;

Variabel OldX digunakan untuk menyimpan posisi horisontal (x)
mouse sebelum digeser, sedangkan posisi vertikalnya (y)
disimpan dalam variabel OldY. Nilai variabel CrossHairColor
bertipe TColor digunakan untuk mengisi warna pena (property
Color) yang akan dipakai saat melukis garis Cross-Hair pada
komponen TChart. Property Style pena tersebut berasal dari nilai
variabel CrossHairStyle.

Prosedur Event OnCreate pada TForm (FCrossHair)
Kode program yang dideklarasikan dalam prosedur event
OnCreate hanya dijalankan sekali, yaitu saat form dibangun. Klik
ganda sel di sebelah kanan event OnCreate form sehingga muncul
sebuah prosedur pada jendela Code Editor.
procedure TFCrossHair.FormCreate(Sender: TObject);
begin
Series1.FillSampleValues(30);
OldX:= -1;
CrossHairColor:= clAqua;
CrossHairStyle:= psSolid;
CCrossClick(Sender);
end;

Metode FillSampleValues akan memplot nilai acak pada
TChartSeries dengan rentang data sebanyak angka dalam tanda
kurung. Posisi horisontal mouse yang lama di-reset dengan
memberi nilai -1 pada variabel OldX. Warna pertemuan kedua
garis Cross-Hair ketika form FCrossHair pertama kali ditampilkan
bernilai clAqua dan disimpan dalam variabel CrossHairColor. Garis
Cross-Hair ditampilkan solid (tidak terputus-putus) dengan
memberi nilai psSolid pada property Style pena (menjadi nilai

178

variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankan
perintah event OnClick komponen TCheckBox CCross.

Prosedur Event OnClick pada Komponen TCheckBox (CCross)
Komponen TCheckBox CCross berfungsi untuk mengubah kursor
ketika mouse berada di daerah komponen TChart. Kursor
ditampilkan Cross (crCross) jika property Checked komponen
TCheckBox CCross bernilai True (dicentang) dan jika sebaliknya
kursor berbentuk Default (crDefault). Klik ganda sel di sebelah
kanan event OnClick komponen TCheckBox tersebut, kemudian
deklarasikan perintahnya.
procedure TFCrossHair.CCrossClick(Sender: TObject);
begin
if CCross.Checked then
Chart1.Cursor:= crCross
else Chart1.Cursor:= crDefault;
Chart1.OriginalCursor:= Chart1.Cursor;
end;

Property OriginalCursor me-reset kursor komponen TChart ketika
mouse bergerak melewati TChartSeries yang terdapat di
dalamnya.

Prosedur Event OnMouseMove pada Komponen TChart (Chart1)
Prosedur event OnMouseMove berguna untuk menangani kejadian
ketika mouse digerakan di atas komponen TChart Chart1. Buatlah
prosedur lokal DrawCross pada prosedur event OnMouseMove
yang berisi perintah-perintah untuk melukis garis Cross-Hair
dengan property Canvas komponen TChart.
procedure TFCrossHair.Chart1MouseMove(Sender: TObject; Shift:
TShiftState; X, Y: Integer);
procedure DrawCross(ax,ay: Integer);
begin
with Chart1, Canvas do begin
Pen.Color:= CrossHairColor;
Pen.Style:= CrossHairStyle;
Pen.Width:=1;
Pen.Mode:= pmXor;
MoveTo(ax, ChartRect.Top-Height3D);
LineTo(ax, ChartRect.Bottom-Height3D);
MoveTo(ChartRect.Left+Width3D, ay);
LineTo(ChartRect.Right+Width3D, ay);

179

end;
end;

var
ValueX, ValueY: Double;
begin
if (OldX <> -1) then
begin
DrawCross(OldX, OldY);
OldX:= -1;
end;

if PtInRect(Chart1.ChartRect, Point(X-Chart1.Width3D,
Y+Chart1.Height3D)) then begin
DrawCross(x, y);
OldX:= x;
OldY:= y;
with Series1 do begin
GetCursorValues(ValueX, ValueY);
LValue.Caption:= 'Nilai X/Y :
'+GetHorizAxis.LabelValue(ValueX)+
'/'+GetVertAxis.LabelValue(ValueY);
end;
end else
LValue.Caption:= '';
end;

Property Color TPen menentukan warna yang digunakan untuk
menggambar garis dalam kanvas (komponen TChart Chart1).
Property Style TPen menentukan style pena, property Width
menentukan ketebalan garis tersebut, dan property Mode TPen
menentukan bagaimana warna pena tersebut berinteraksi dengan
warna kanvas. Tabel berikut ini menjelaskan arti nilai property
Style dan Mode.
Property Nilai Arti
Style psSolid Garis solid (tidak terputus-putus)
psDash Garis disusun dari tanda minus (-)
psDot Garis disusun dari tanda titik (.)
psDashDot Garis disusun dari selang-seling tanda
minus dan titik
psDashDotDot Garis disusun dari kombinasi tanda
minus-tanda titik-tanda titik
psClear Tidak ada garis yang digambar
psInsideFrame Garis solid, tetapi menggunakan
banyak warna dan property Width lebih

180

dari 1
Mode pmBlack Selalu berwarna hitam
pmWhite Selalu berwarna putih
pmNop Tidak dapat diubah
pmNot Kebalikan dari warna background
kanvas
pmCopy Warna pena ditentukan berdasarkan
property Color-nya
pmNotCopy Kebalikan dari property Color TPen
pmMergePenNot Kombinasi dari nilai property Color dan
kebalikan warna background kanvas
pmMaskPenNot Kombinasi warna dominan di antara
nilai property Color dan kebalikan
warna background kanvas
pmMergeNotPen Kombinasi warna background kanvas
dan kebalikan nilai property Color TPen
pmMaskNotPen Kombinasi warna dominan di antara
warna background kanvas dan
kebalikan nilai property Color TPen
pmMerge Kombinasi warna nilai property Color
dan warna background kanvas
pmNotMerge Kebalikan dari pmMerge
pmMask Kombinasi warna dominan di antara
nilai property Color dan warna
background kanvas
pmNotMask Kebalikan dari pmMask
pmXor Kombinasi warna nilai property Color
atau warna background kanvas, tetapi
bukan keduanya.
pmNotXor Kebalikan dari pmXor

Kembali ke prosedur lokal DrawCross, metode Move To akan
mengubah posisi mouse ke suatu koordinat. Pemanggilan metode

181

Move To sama dengan menentukan property PenPos TPen, serta
dilakukan sebelum memanggil metode Line To. Metode Line To
menggambar garis pada kanvas dari koordinat yang ditentukan
dalam metode Move To sampai koordinat baru (x, y) yang
ditentukan oleh mouse dan menetapkan posisi pena pada
koordinat baru tersebut.
Pada prosedur lokal DrawCross, kombinasi metode MoveTo dan
LineTo yang pertama untuk menggambar garis Cross-Hair vertikal
dimulai dari koordinat (nilai variabel ax (posisi x Mouse), posisi
atas kotak grafik (property ChartRect), tinggi dinding grafik akibat
efek 3D (property Heigh3D)), sampai koordinat (nilai variabel ax,
posisi bawah kotak grafik-tinggi dinding 3D). Pengurangan
koordinat y dengan nilai property Height3D berguna untuk
mengantisifasi tampilan grafik 3D (tiga dimensi), yaitu jika
parameter CheckBox 3D pada subtab 3D (Gambar 1.10) diberi
tanda centang. Property Height3D bernilai 0 jika grafik ditampilkan
2 dimensi sehingga garis Cross-Hair vertikal menempel pada
dinding grafik.
Kombinasi yang kedua berguna untuk menggambar garis Cross-
Hair horisontal dengan batas kiri garis pada koordinat (posisi kiri
kotak grafik (property ChartRect) ditambah lebar dinding grafik
akibat efek 3D (property Width3D), nilai variabel ay (posisi y
Mouse)) dan batas kanan grafik pada koordinat (posisi kanan
kotak grafik+lebar dinding 3D), nilai variabel ay). Property
Width3D bernilai 0 jika grafik ditampilkan 2 dimensi. Nilai property
Height3D dan Width3D berdasarkan nilai SpinEdit 3D% pada
subtab 3D.
Pada prosedur event OnMouseMove di atas, jika posisi mouse
tidak sedang di-reset (tidak sama dengan -1) maka prosedur lokal
DrawCross dipanggil untuk membuat garis Cross-Hair. Nilai
variabel ax dan ay berasal dari posisi (x, y) mouse sebelum posisi
tersebut berubah menjadi yang tersimpan sementara dalam
variabel OldX dan OldY. Posisi (x, y) mouse tersebut kemudian di-
reset dengan memberi nilai -1 pada variabel OldX sehingga garis
Cross-Hair yang telah terbentuk akan dihapus sebelum membuat
garis Cross-Hair baru.

182

Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada di
dalam kotak grafik Chart1 dengan syntax sebagai berikut:
function PtInRect(const Rect: TRect; const P: TPoint): Boolean;

Fungsi PtInRect akan bernilai True jika koordinat titik P berada di
dalam kotak Rect. Jika posisi x mouse (dikurangi nilai property
Height3D komponen TChart) dan posisi y mouse (ditambah nilai
property Width3D komponen TChart) berada dalam kotak grafik
(property ChartRect komponen TChart) maka garis Cross-Hair
baru akan digambar berdasarkan posisi (x, y) mouse tersebut.
Garis Cross-Hair lama telah terhapus dengan perintah sebelumnya.
Selanjutnya, nilai posisi (x, y) mouse tersebut disimpan dalam
variabel OldX (posisi x) dan OldY (posisi y).
Metode GetCursorValues berguna untuk mendapatkan nilai posisi
(x, y) mouse pada TChartSeries yang ditentukan. Nilai-nilai
tersebut disimpan sementara dalam variabel ValueX dan ValueY,
kemudian ditampilkan dalam property Caption komponen TLabel
LValue menggunakan metode LabelValue pada masing-masing
sumbu grafik. Metode GetHorizAxis menghubungkan TChartSeries
Series1 dengan sumbu horisontal grafik. Untuk
menghubungkannya dengan sumbu vertikal grafik, gunakan
metode GetVertAxis.
Jika mouse tidak berada dalam kotak grafik (fungsi PtInRect
bernilai False) maka garis Cross-Hair tidak digambar dan tidak
ada teks yang ditampilkan dalam property Caption komponen
TLabel LValue.

Prosedur Event OnAfterDrawValue pada TChartSeries (Series1)
Event OnAfterDrawValue terjadi setelah data diplot dalam
TChartSeries, yaitu me-reset posisi (x, y) mouse. Perintah ini
berguna ketika plot data dilakukan secara on-line. Cara
membuatnya, aktifkan jendela Object TreeView, cari object
bernama Series1 (terletak pada komponen TChart), kemudian
aktifkan jendela Object Inspector dan klik ganda sel di sebelah
kanan event OnAfterDrawValue object tersebut.
procedure TFCrossHair.Series1AfterDrawValues(Sender: TObject);
begin

183

OldX:= -1;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BColor)
Warna kursor Cross dapat diubah dengan mengubah nilai variabel
CrossHairColor. Perubahan warna dapat dilakukan dengan
memanggil kotak dialog Color dan dieksekusi dengan tombol OK.
Oleh karena komponen TColorDialog tidak dipasang dalam form,
deklarasikan function bernama EditColor pada bagian private unit
dan ketikkan kode program untuk function tersebut untuk
memanggil kotak dialog Color.
private
{ Private declarations }
function EditColor(AOwner:TComponent; AColor:TColor):TColor;

function TFCrossHair.EditColor(AOwner: TComponent;
AColor: TColor): TColor;
begin
with TColorDialog.Create(AOwner) do
try
Color:= AColor;
if Execute then
AColor:= Color;
finally
Free;
end;
result:= AColor;
end;

Konstruktor Create pada komponen TColorDialog berguna untuk
membangkitkan kotak dialog Color dan menginisialisasi warna
yang terpilih berdasarkan nilai variabel AColor. Metode Execute
digunakan untuk menampilkan kotak dialog Color. Jika kotak
dialog Color tersebut dieksekusi, nilai variabel AColor akan sama
dengan warna yang dipilih dari daftar warna pada kotak dialog
Color. Hasil dari function EditColor adalah variabel AColor.
Komponen TSpeedButton BColor dipakai untuk menampilkan
kotak dialog Color kemudian mengeksekusinya. Klik ganda sel di
sebelah kanan event OnClick komponen tersebut.
procedure TFCrossHair.BColorClick(Sender: TObject);
begin
CrossHairColor:= EditColor(Self, CrossHairColor);
end;

184

Warna yang terpilih ketika kotak dialog Color ditampilkan sama
dengan nilai variabel CrossHairColor saat itu dan pada saat kotak
dialog Color dieksekusi, hasilnya (nilai variabel AColor) menjadi
nilai variabel CrossHairColor yang baru. Perubahan nilai variabel
tersebut akan mengubah warna kursor Cross, sedangkan warna
garis Cross-Hair merupakan kombinasi warna (dua warna yang
sama) yang pertemuannya menghasilkan warna kursor Cross.
Untuk menampilkan form FcrossHair, buat sebuah prosedur event
OnClick pada komponen TSpeedButton BShow yang terpasang
dalam form FOtherDemo. Klik ganda komponen TSpeedButton
tersebut kemudian ketik kode program berikut.
procedure TFOtherDemo.BShowClick(Sender: TObject);
begin
if GBExpand.Visible then begin
if RCrossHair.Checked then
FCrossHair.ShowModal;
end;
end;

Form FCrossHair hanya akan ditampilkan jika komponen
TGroupBox GBExpand telah ditampilkan dan komponen
TRadioButton RCrossHair dipilih, kemudian pengguna menekan
komponen TSpeedButton BShow.

3.3 Zoom dan Scrolling Grafik dengan Tombol
Keyboard
Pada aplikasi Sistem Akuisi Data, proses zoom grafik
menggunakan komponen TSpeedButton dan scrolling grafik
dengan komponen TScrollBar. Kedua proses tersebut dapat
dilakukan dengan keyboard, untuk itu buat sebuah form baru, beri
nama Fkeyboard, dan simpan unit dalam UKeyboard. Letakkan
sebuah komponen TChart, sebuah komponen TPanel, 2 (dua)
buah komponen TCheckBox, dan 2 (dua) buah komponen TLabel
pada form FKeyboard. Ubah property komponen-komponen
tersebut seperti tabel berikut ini. Untuk property yang mempunyai
nilai lebih dari satu, nilai masing-masing dipisahkan oleh tanda
titik koma. Sesuaikan berdasarkan urutan property Name.

185

Nama
Nama Object Nilai
Property
TForm AutoSize True

Caption Zoom-Scrolling with Keyboard
Topic
KeyPreview True
Name FKeyboard
TPanel BevelOuter bvNone
(tab Standard) Color clWhite
Height 62
Left 0
Name Panel1
Top 384
Width 540
TCheckBox Caption &Inverted Scrolling; Scrolling
(tab Standard) &Limited
sebanyak 2
Left 15
buah. Pasang
dalam Panel1 Name CInverted; CLimit
Top 15; 40
Tlabel AutoSize True; False

186

(tab Standard) Caption Read This :; Gunakan tombol
panah dan Page Up/Page
sebanyak 2
Bottom untuk scrolling grafik.
buah pasang
Tekan SPACE untuk me-reset
dalam Panel1
zoom dan kombinasi tombol
SHIFT + tombol panah untuk
zoom grafik
Height 13; 40
Left 241; 247
Name Label1; Label2
Top 1; 18
Transparent True

Property yang lain biarkan sesuai dengan nilai default-nya. Pada
komponen TChart, buat sebuah TChartSeries bertipe Line dua
dimensi dengan nama Series1 dan ubah nilai beberapa property
lain sesuai kebutuhan.
Untuk menampilkan form FKeyboard, buka kembali prosedur
event OnClick BShowClick pada unit UOtherDemo (form
FOtherDemo), kemudian tambahkan kode programnya sehingga
prosedur tersebut menjadi seperti berikut ini.
begin
FCrossHair.ShowModal else
if RKeyboard.Checked then
FKeyboard.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FKeyboard)
Prosedur event OnCreate hanya berguna untuk menginisialisasi
TChartSeries, yaitu nilai acak dengan rentang sebanyak 500 data
yang diplot dalam TChartSeries melalui metode FillSampleValues.
Klik ganda sel di sebelah kanan event OnCreate form, kemudian
ketikkan kode programnya.

187

procedure TFKeyboard.FormCreate(Sender: TObject);
begin
end;

Prosedur Event OnShow pada TForm (FKeyboard)
Proses zoom dan scrolling grafik dengan keyboard hanya dapat
dilakukan jika komponen TChart yang dimaksud menjadi focus
form sehingga setiap kali form ditampilkan, komponen TChart
Chart1 harus diset menjadi focus form seperti pada prosedur event
OnShow berikut ini.
procedure TFKeyboard.FormShow(Sender: TObject);
begin
Chart1.SetFocus;
end;

Prosedur event OnShow tersebut dapat diganti (dihapus) dengan
memberi nilai Chart1 pada property ActiveControl form
FKeyboard. Akan tetapi jika aplikasi mempunyai komponen
TChart yang dapat di-zoom dan scrolling lebih dari satu,
pemberian nilai property ActiveControl tersebut tidak dapat
dilakukan.

Prosedur Event OnKeyDown pada TForm (FKeyboard)
Event OnKeyDown akan terjadi jika property KeyPreview form
bernilai True. Ketika pengguna menekan suatu atau kombinasi
tombol keyboard dan form tersebut diaktifkan, perintah-perintah
dalam event ini akan dijalankan. Klik ganda sel di sebelah kanan
event OnKeyDown form Fkeyboard, kemudian ketikkan kode
program berikut ini.
procedure TFKeyboard.FormKeyDown(Sender: TObject;
var Key: Word; Shift: TShiftState);
var
aX, aY,
XRange,YRange:Double;
begin
aX:= 0;
aY:= 0;
with Series1.GetHorizAxis do XRange:= Maximum - Minimum;
with Series1.GetVertAxis do YRange:= Maximum - Minimum;

if ssShift in Shift then begin
Case key of
VK_LEFT, VK_UP : Chart1.ZoomPercent(110);

188

VK_RIGHT, VK_DOWN : Chart1.ZoomPercent(90);
end;
exit;
end else
Case key of
VK_LEFT : aX:= XRange/100;
VK_RIGHT : aX:= -XRange/100;
VK_UP : aY:= -YRange/100;
VK_DOWN : aY:= YRange/100;
VK_NEXT : aY:= YRange/10;
VK_PRIOR : aY:= -YRange/10;
VK_SPACE : begin Chart1.UndoZoom; Exit; end;
end;

if CInverted.Checked then begin
aX:= -aX;
aY:= -aY;
end;

with Chart1 do begin
LeftAxis.Scroll(aY, CLimits.Checked);
RightAxis.Scroll(aY, CLimits.Checked);
BottomAxis.Scroll(aX, CLimits.Checked);
TopAxis.Scroll(aX, CLimits.Checked);
SetFocus;
end;
end;

Proses scrolling komponen TChart sebenarnya hanya menggeser
range skala sumbu horisontal atau skala sumbu vertikal (nilai
property Maximum dikurangi dengan property Minimum). Nilai
skala maksimum dan minimum sumbu horisontal grafik diperoleh
setelah dihubungkan dengan metode GetHorizAxis dan dengan
metode GetVertAxis untuk sumbu vertikal. Range skala sumbu
horisontal grafik disimpan dalam variabel XRange, sedangkan
variabel YRange untuk menyimpan range skala sumbu vertikal
grafik.
Flag ssShift merupakan salah satu nilai kelas bertipe TShiftState
yang digunakan untuk menentukan keadaan tombol Alt, Ctrl, Shift,
dan tombol mouse. Tabel berikut ini menjelaskan masing-masing
arti nilai flag:
Nilai Arti
ssShift Tombol Shift ditekan
ssAlt Tombol Alt ditekan
ssCtrl Tombol Ctrl ditekan

189

ssLeft Tombol kiri mouse ditekan
ssRight Tombol kanan mouse ditekan
ssMiddle Tombol tengah mouse
ditekan
ssDouble Mouse diklik ganda

Pada prosedur event KeyDown di atas, jika tombol Shift ditekan
bersama dengan tombol panah kiri atau atas (VK_LEFT, VK_UP)
maka grafik diperbesar 1,1 kalinya (110 %). Grafik diperkecil 90%
jika kombinasi tombol Shift dan tombol panah kanan atau bawah
(VK_RIGHT, VK_DOWN) ditekan pengguna. Penggunaan prosedur
Exit adalah untuk mengeluarkannya dari prosedur yang sekarang
sedang dijalankan.
Jika tombol Shift tidak ditekan, kemudian pengguna menekan
salah satu tombol panah atau Page Up atau Page Down maka
proses scrolling grafik akan dilakukan dengan metode Scroll pada
masing-masing sumbu grafik. Metode Scroll mempunyai syntax:
procedure Scroll(Const Offset: Double; InsideLimits: Boolean);

Metode ini akan mengeser nilai skala maksimum dan minimum
suatu sumbu grafik berdasarkan konstanta Offset. Jika ingin
menggeser grafik secara tidak terbatas maka variabel InsideLimits
harus bernilai False. Nilai variabel InsideLimits tergantung pada
nilai property Checked komponen TCheckBox CLimits.
Nilai variabel aX menentukan scrolling sumbu horisontal grafik,
sedangkan variabel aY untuk scrolling sumbu vertikal grafik.
Kedua variabel tersebut pertama kali diinisialisasi dengan nilai 0
untuk menghapus nilai sebelumnya. Jika penguna menekan salah
satu tombol panah maka grafik akan digeser searah tanda panah
tersebut sebesar nilai range sumbu grafik dibagi dengan 100. Pada
sumbu horisontal, nilai range sumbu horisontal (variabel XRange)
adalah 500 data (angka dalam tanda kurung metode
FillSampleValues) sehingga jika pengguna menekan tombol panah
kiri maka grafik akan digeser ke kiri sebesar 5 titik. Jika pengguna
menekan tombol Page Up (VK_PRIOR) atau Page Down
(VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range

190

sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbu
vertikal tergantung pada data random yang di-plot dalam
TChartSeries.
Untuk me-reset zoom grafik, digunakan tombol SPACE
(VK_SPACE) dengan memanggil metode UndoZoom. Arah proses
scrolling akan terbalik dengan arah tombol panah jika komponen
TCheckBox CInverted dicentang, yaitu hanya dengan memberi
nilai minus pada variabel aX dan aY.

Prosedur Event OnClick pada TCheckBox (CInverted dan CLimits)
Pemberian/penghilangan tanda centang pada komponen
TCheckBox akan membangkitkan event OnClick dan fokus form
berada pada komponen tersebut. Proses scrolling dan zoom grafik
dengan tombol keyboard hanya akan terjadi jika komponen
TChart yang dimaksud menjadi focus form sehingga prosedur
event OnClick pada kedua komponen tersebut hanya berguna
untuk mengembalikan focus form pada komponen TChart dengan
memanggil metode SetFocus. Klik ganda masing-masing
komponen TCheckBox sehingga pada jendela Code Editor akan
muncul dua buah prosedur bernama CInvertedClick dan
ClimitsClick. Ketikkan kode program berikut untuk masing-masing
prosedur.
procedure TFKeyboard.CInvertedClick(Sender: TObject);
begin
Chart1.SetFocus;
end;

procedure TFKeyboard.CLimitsClick(Sender: TObject);
begin
if CLimits.Checked then begin
ShowMessage('Scrolling grafik terbatas hanya pada data '+
'yang telah diplot.'+#13+
'Lakukan zoom terlebih dahulu '+
'sebelum scrolling grafik.');
Chart1.SetFocus;
end else
Chart1.SetFocus;
end;

Tambahan kode program pada prosedur ClimitsClick digunakan
untuk menampilkan sebuah pesan ketika komponen TCheckBox
Climits diberi tanda centang (property Checked bernilai True).

191

Pesan tersebut tidak akan muncul ketika pengguna
menghilangkan tanda centang pada komponen TCheckBox
Climits.

3.4 Mengubah Property BackImage
Komponen TChart Secara Run-time
Property BackImage komponen TChart berguna untuk memberi
latar belakang grafik dengan gambar. Saat desain form, gambar
tersebut dicari dengan tombol Browse pada GroupBox BackImage
subtab Panel (lihat kembali Gambar 1.7). Buat sebuah form
dengan nama FBackImage dan simpan unit dalam UBackImage.
Kemudian tambahkan sebuah komponen TOpenDialog, sebuah
komponen TChart, sebuah komponen TPanel, sebuah komponen
TGroupBox, 3 (tiga) buah komponen TRadioButton, dan 2 (dua)
buah komponen TSpeedButton. Ubah property komponen-
komponen tersebut seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan
oleh tanda titik koma. Sesuaikan berdasarkan urutan property
Name.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Property BackImage Topic
Name FBackImage
Standard)
Color clWhite
Height 54
Left 0
Name Panel1

192

Top 407
Width 540
TGroupBox Caption Style
(tab Standard).
Color clWhite
Pasang pada
Panel1 Height 43
Left 8
Name GBStyle
Top 7
Width 212
TRadioButton Caption Stretch; Tile; Center
(tab Standard)
Checked True; False; False
sebanyak 3
buah. Pasang Left 17; 81; 137
dalam GBStyle
Name RStretch; RTile; RCenter
Top 20
TSpeedButton Caption Browse...; Clear Bitmap
(tab Additional)
Cursor crHandPoint
sebanyak 2
buah. Pasang Flat True
dalam Panel1
Height 22
Left 349; 447
Name BBrowse; BClear
Top 20
Width 80

Biarkan Property yang lain sesuai nilai default-nya. Komponen
TOpenDialog berfungsi untuk membuka folder tempat file gambar.
Jika ingin menyaring file gambar dengan eketensi tertentu ketika
kotak dialog Open ditampilkan, misalnya hanya file gambar

193

bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkan
jendela Object Inspector dan klik ganda sel di sebelah kanan
property Filter sehingga muncul kotak dialog Filter Editor. Isikan
sel pertama sebelah kiri dengan File Bitmap dan sel di sebelah
kanannya dengan *.bmp, kemudian tekan tombol OK.
Untuk mengedit komponen TChart, klik ganda komponen tersebut
sehingga muncul Gambar 1.1. Buat sebuah TChartSeries bertipe
Line dua dimensi dengan nama Series1. Klik subtab Panel dan
berikan gambar background Chart1 dengan menekan tombol
Browse.... Pilih RadioButton Stretch pada GroupBox Style dan
tandai CheckBox Inside. Ubah nilai beberapa property lain sesuai
kebutuhan.
Buka kembali prosedur BShowClick pada unit UotherDemo,
kemudian tambahkan kode program untuk menampilkan form
FBackImage melalui tombol BShow pada form FOtherDemo.
begin
FKeyboard.ShowModal else
FBackImage.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FBackImage)
Kode program pada event OnCreate form FBackImage hanya
digunakan untuk menambahkan data pada TChartSeries Series1
sebanyak 100 data dengan memanggil metode FillSampleValues.
Klik ganda sel di sebelah kanan event OnCreate, kemudian
ketikkan perintahnya.
procedure TFBackImage.FormCreate(Sender: TObject);
begin
end;

194

Prosedur Event OnClick pada Komponen TSpeedButton (BBrowse
dan BClear)
Komponen TSpeedButton BBrowse berfungsi untuk mencari
gambar yang akan mengisi background komponen TChart Chart1,
sedangkan komponen BClear berfungsi untuk menghapus gambar
background tersebut. Klik ganda pada masing-masing komponen
TSpeedButton tersebut sehingga pada jendela Code Editor muncul
dua buah prosedur, kemudian ketikkan kode program berikut ini.
procedure TFBackImage.BClearClick(Sender: TObject);
begin
Chart1.BackImage:= nil;
GBStyle.Enabled:= False;
CInside.Enabled:= False;
end;

procedure TFBackImage.BBrowseClick(Sender: TObject);
begin
if OpenDialog1.Execute then begin
Chart1.BackImage.LoadFromFile(OpenDialog1.FileName);
GBStyle.Enabled:= True;
CInside.Enabled:= True;
end;
end;

Pada prosedur BClearClick, gambar background grafik dihapus
dengan memberi nilai nil pada property BackImage komponen
TChart Chart1.
Sebuah kotak dialog Open akan muncul ketika pengguna
menekan komponen BBrowse, kemudian jika kotak dialog tersebut
dieksekusi (tombol Open ditekan) maka dengan metode
LoadFromFile, background grafik akan diisi dengan file gambar
yang telah dipilih. Property Enabled komponen TGroupBox
GBStyle dan komponen TCheckBox CInside diberi nilai True
sehingga dapat diakses kembali setelah pada prosedur
BClearClick dinonaktifkan.

Prosedur Event OnClick pada Komponen TRadioButton (RStretch,
RTile, dan RCenter)
Style gambar dapat diset dalam mode Stretch, Tile, dan Center.
Mode Stretch menyebabkan gambar mengambil ukuran dan
bentuk komponen TChart, artinya jika ukuran dan bentuk
komponen TChart diubah maka gambar akan ikut berubah.

195

Seluruh gambar background akan ditampilkan seukuran
komponen TChart meskipun ukuran gambar tersebut terlalu besar.
Dalam mode Tile, jika gambar background terlalu besar maka
gambar tersebut tidak seluruhnya mengisi komponen TChart,
tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambar
kemudian terpotong sampai pada batas bawah dan kanan grafik.
Pada mode Center, hanya posisi tengah gambar yang akan
memenuhi background grafik jika ukuran gambar tersebut terlalu
besar. Blok ketiga komponen tersebut, isi sel di sebelah kanan
event OnClick dengan nama prosedur RadioButtonClick, kemudian
tekan tombol Enter.
procedure TFBackImage.RadioButtonClick(Sender: TObject);
begin
if RStretch.Checked then
Chart1.BackImageMode := pbmStretch
else if RTile.Checked then
Chart1.BackImageMode := pbmTile
else Chart1.BackImageMode := pbmCenter;
end;

Jika pengguna memilih komponen TRadioButton RStretch maka
gambar background grafik ada dalam mode Stretch, demikian
seterusnya untuk komponen TRadioButton yang lain.

Prosedur Event OnClick pada Komponen TCheckBox (CInside)
Gambar background grafik dapat dibuat memenuhi seluruh
dinding komponen TChart atau hanya dalam kotak grafiknya saja,
bergantung pada nilai property BackImageInside-nya. Untuk
mengendalikan nilai property tersebut, gunakan nilai property
Checked komponen TCheckBox CInside. Klik ganda komponen
TCheckBox tersebut kemudian ketik kode programnya.
procedure TFBackImage.CInsideClick(Sender: TObject);
begin
Chart1.BackImageInside:= CInside.Checked;
end;

Property BackImageInside komponen TChart akan bernilai True
jika komponen TCheckBox CInside diberi tanda centang.

196

3.5 Digital Series
Seluruh sistem operasi dalam komputer sebenarnya menggunakan
kombinasi bilangan biner, yaitu 0 (nol) dan 1 (satu). Proses
tersebut kemudian dinamakan proses digital. Buat sebuah form
baru bernama FDigital dan simpan unitnya dengan nama UDigital.
Pada form tersebut, letakkan sebuah komponen TChart, sebuah
komponen TPanel, sebuah komponen TTimer, sebuah komponen
TspeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubah
property komponen-komponen tersebut seperti tabel berikut ini.
TForm AutoSize True
Caption Digital Series Topic
Name FDigital
Standard)
Color clWhite
Height 72
Left 0

Name Panel1
Top 407
Width 540
TTimer (tab Enabled False
System)
Interval 1
Name Timer1
TSpeedButton Caption &Run

197

(tab Cursor crHandPoint
Additional).
Flat True
Pasang dalam
Panel1 Height 54
Left 424
Name BRun
Top 10
Width 102
TCheckBox Caption Last Values in Legend; View
(tab Standard) 3D; Z Order
sebanyak 3
Cheked True
buah. Pasang
dalam Panel Left 15
Name CLastValues; CView; COrder
Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Pada
komponen Tchart, buat empat buah TChartSeries bertipe line tiga
dimensi, kemudian beri judul yang berbeda sebagai nama masing-
masing TChartSeries, dengan menekan tombol Title... pada subtab
Series (Gambar 1.1). Klik tab Series, kemudian pilih subtab
Format seperti Gambar 2.3. Pada GroupBox Line Mode, beri tanda
centang pada CheckBox Stairs untuk mengubah TChartSeries
dalam bentuk seperti „tangga‰ (umumnya grafik digital). Ubah
property komponen TChart yang lain sesuai kebutuhan.
Untuk memanggil form FDigital, tambahkan beberapa kode pada
prosedur event OnClick komponen TSpeedButton BShow
(BShowClick). Prosedur tersebut sekarang menjadi seperti berikut:
begin
FBackImage.ShowModal
end else begin

198

if RDigital.Checked then
FDigital.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FDigital)
Prosedur event OnCreate form hanya berisi inisialisasi beberapa
property. Klik ganda sel di sebelah kanan event OnCreate form,
kemudian ketikkan kode program berikut pada prosedur yang
muncul.
procedure TFDigital.FormCreate(Sender: TObject);
begin
Chart1.ApplyZOrder:= COrder.Checked;
Chart1.Legend.Inverted:= True;
end;

Property ApplyZOrder digunakan untuk mengontrol ketika
beberapa TChartSeries pada komponen TChart yang sama harus
ditampilkan independen dalam ruang Z yang berbeda. Property
tersebut valid jika grafik ditampilkan 3D dan mempunyai lebih dari
satu TChartSeries. Pemberian nilai True pada property Inverted
subtab Legend untuk membalikkan urutan legend grafik dari
TChartSeries berindeks terbesar.

Prosedur Event OnTimer pada Komponen TTimer (Timer1)
Untuk simulasi operasi, data sinyal digital berupa data acak
dengan range 2 data (0 dan 1) diplot pada keempat TChartSeries
dengan menggunakan komponen TTimer Timer1. Klik ganda
komponen tersebut sehingga pada jendela Code Editor muncul
sebuah prosedur.
procedure TFDigital.Timer1Timer(Sender: TObject);
var
GainData: Longint;
begin
for GainData:= 0 to Chart1.SeriesCount-1 do
with Chart1.Series[GainData] do
Add(2*GainData+Random(2), '', clTeeColor);

with Chart1.BottomAxis do begin
Automatic := False;
Maximum := Series1.XValues.Last;
Minimum := Maximum - 100;
end;
end;

199

Variabel GainData berguna untuk menaikkan TChartSeries pada
suatu posisi sehingga keempat TChartSeries tersebut tidak saling
tumpang tindih. Plot data pada masing-masing TChartSeries
menggunakan metode Add dengan syntax:
function Add(Const AValue:Double; Const ALabel:String;
AColor:TColor):Longint; virtual;

Metode Add digunakan untuk menambahkan data pada
TChartSeries jika nilai sumbu horisontal grafik (x) secara otomatis
ditentukan ketika nilai sumbu vertikal (y) akan diplot. Varibel
ALabel dan AColor merupakan parameter pilihan seperti pada
metode AddXY. Nilai Y grafik untuk TChartSeries kedua bergeser
secara vertikal sebanyak 2 (dua) kalinya, sedangkan yang ketiga
bergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak
6 (enam) kalinya.
Kode program selanjutnya adalah untuk menggeser grafik ke kiri
setiap kali ada data yang diplot dalam TChartSeries. Nilai skala
maksimum sumbu bawah grafik mengambil nilai terakhir yang
telah diplot dalam TChartSeries. Range sumbu horisontal grafik
yang ingin ditampilkan setiap kali ada plot data adalah 100 data.
Kode program ini dapat ditulis dalam event OnAfterAdd pada
keempat TChartSeries seperti pada pembuatan aplikasi Sistem
Akuisisi Data.

Prosedur Event OnClick pada Komponen TSpeedButton (BRun)
Pada saat desain form, property Enabled komponen TTimer
Timer1 bernilai False sehingga untuk mengendalikannya
dimanfaatkanlah komponen TSpeedButton BRun. Klik ganda sel di
sebelah kanan event OnClick komponen tersebut, kemudian ketik
kode programnya.
procedure TFDigital.BRunClick(Sender: TObject);
begin
if BRun.Caption = '&Run' then begin
BRun.Caption:= 'Stop';
Timer1.Enabled:= True;
end else begin
BRun.Caption:= '&Run';
Timer1.Enabled:= False;
end
end;

200

Selain untuk mengaktifkan komponen TTimer Timer1, komponen
TSpeedButton BRun juga digunakan untuk menonaktifkann
berdasarkan nilai property Caption komponen TSpeedButton
tersebut.

Prosedur Event OnClick pada Komponen TCheckBox
(CLastValues, CView, dan COrder)
Ketiga komponen TCheckBox tersebut berfungsi untuk mengubah
beberapa property komponen TChart, yaitu property LegendStyle
pada subtab Legend, property 3D pada subtab 3D, dan property
ApplyZOrder. Klik ganda masing-masing komponen TCheckBox,
sehingga muncul tiga buah prosedur. Lengkapi ketiga prosedur
tersebut sehingga menjadi seperti berikut ini
procedure TFDigital.CLastValuesClick(Sender: TObject);
begin
if CLastValues.Checked then
Chart1.Legend.LegendStyle:= lsLastValues
else Chart1.Legend.LegendStyle:= lsAuto;
end;

procedure TFDigital.CViewClick(Sender: TObject);
begin
Chart1.View3D:= CView.Checked;
end;

procedure TFDigital.COrderClick(Sender: TObject);
begin
Chart1.ApplyZOrder:= COrder.Checked;
Chart1.Repaint;
end;

Property LegendStyle berguna untuk menentukan materi mana
yang akan ditampilkan dalam legend grafik. Jika diberi nilai Last
Values maka akan ditampilkan nilai terakhir dari semua
TChartSeries yang aktif. Jika diberi nilai Automatic maka secara
otomatis nilai property Title TChartSeries akan ditampilkan dalam
legend grafik. Metode Repaint menyebabkan Chart induk di-repaint
(digambar ulang).

201

Prosedur Event OnGetLegendTex pada Komponen TChart
(Chart1)
Event OnGetLegendText digunakan untuk mengganti penulisan
teks pada legend grafik. Klik ganda sel di sebelah kanan event
OnGetLegendText komponen TChart Chart1, kemudian ketikkan
kodenya.
procedure TFDigital.Chart1GetLegendText(Sender:
TCustomAxisPanel; LegendStyle: TLegendStyle; Index:
Integer; var LegendText: String);
begin
if LegendStyle = lsLastValues then
LegendText:= LegendText+' --> '+Chart1.Series[Index].Title;
end;

Teks legend akan diganti jika komponen TCheckBox CLastValues
diberi tanda centang (atau property LegendStyle komponen
TChart bernilai lsLastValues).

3.6 Mengukur Kecepatan Plot Data pada
TChartSeries Bertipe Fast Line
Plot data pada TChartSeries bertipe Fast Line lebih cepat
dibandingkan dengan tipe Line. Untuk mnegukur kecepatannya,
buat sebuah form baru dan simpan dalam unit UFastLine.
Selanjutnya, pasang sebuah komponen TChart, sebuah komponen
TPanel, sebuah komponen TSpeedButton, dan 3 (tiga) buah
komponen TCheckBox. Ubah property komponen-komponen
tersebut seperti tabel berikut ini.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Fast Line Series Topic
Name FFastLine


202

Standard)
Color clWhite
Height 40
Left 0
Name Panel1
Top 407
Width 540
TSpeedButton Caption Speed Test
(tab
Additional). Cursor crHandPoint
Pasang dalam Flat True
Panel1
Height 22
Left 392
Name BSpeed
Top 10
Width 134
TCheckBox Caption &Buffered Display; Draw
(tab Standard) &Axis; &Clip Points
sebanyak 3
Left 15; 150; 250
buah. Pasang
dalam Panel Name CBuffered; CDraw; CClip
Top 15

Biarkan nilai property yang lain sesuai default-nya. Klik ganda
komponen TChart untuk mengedit property-nya. Klik tab Chart
dan pilih subtab Series, lalu buat dua buah TChartSeries bertipe
Fast Line dua dimensi dengan menekan tombol Add....
Selanjutnya, pilih subtab General, hilangkan tanda centang pada
CheckBox Clip Points. Pada subtab Axis, hilangkan tanda centang
pada CheckBox Show Axis sehingga sumbu grafik tidak

203

ditampilkan. Property yang lain dapat diubah sesuai kebutuhan
Anda.
Form FFastLine ditampilkan melalui form FOtherDemo dengan
menekan komponen TSpeedButton BShow di mana komponen
TGroupBox GBFeatures telah ditampilkan dan komponen
TRadioButton RFastLine dipilih. Buka kembali prosedur
BShowClick pada unit UOtherDemo untuk menambahkan
beberapa kode seperti berikut ini.
begin
end else begin
FDigital.ShowModal;
if RFastLine.Checked then
FFastLine.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FFastLine)
Inisialiasasibeberapa variabel, plot data random dalam
TChartSeries dilakukan ketika form dibangun melalui prosedur
event OnCreate. Klik ganda sel di sebelah event tersebut,
kemudian ketik perintah-perintahnya.
procedure TFFastLine.FormCreate(Sender: TObject);
var
DataX, DataRandom: Longint;
begin
TeeEraseBack:= False;
Chart1.BufferedDisplay:= False;
TeeDefaultCapacity:= 2000;

for DataX:= 1 to 1000 do
begin
DataRandom:= Random(Abs(500-DataX))-(Abs(500-DataX) div 2);
Series1.Add(DataX+DataRandom, '', clTeeColor);
Series2.Add(1000-DataX+DataRandom, '', clTeeColor);
end;
end;

Variabel global TeeEraseBack berfungsi untuk menangani pesan
(message) WM_ERASEBACK. Jika bernilai False, akan mencegah

204

TeeChart menghapus latar belakang panel ketika ada perubahan
ukuran grafik. Property BufferedDisplay secara default bernilai
True untuk mencegah kelap-kelip ketika grafik yang mempunyai
banyak titik diplot kembali sehingga kedipan tersebut hanya terjadi
pada daerah kotak grafik. Variabel global TeeDefaultCapacity
merupakan kapasitas default untuk object Tlist. Komponen TChart
selalu menggunakan variabel ini untuk menginisialisasi kapasitas
TList. Secara default, ia bernilai 0 dan jika diset lebih besar lagi
dapat meningkatkan kecepatan ketika memplot data pada
TChartSeries.
Data yang akan diplot pada masing-masing TChartSeries adalah
sebanyak 1000 data. Agar data random yang diplot tersebut
terlihat menyempit ke tengah dan melebar ke kedua sisinya, buat
suatu fungsi pada variabel DataRandom. Penambahan variabel
DataRandom dengan nilai DataX dalam fungsi Add pada
TChartSeries Series1 menyebabkan TChartSeries tersebut diplot
diagonal dalam kotak grafik. TChartSeries Series2 diplot terbalik
dari Series2 sehingga pada posisi tengah (titik 500) keduanya
saling berpotongan.

Prosedur Event OnClick pada Komponen TSpeedButton (BSpeed)
Untuk mengukur kecepatan plot data pada TChartSeries,
dilakukan proses pembesaran dan pengecilan grafik. Klik ganda
sel di sebelah kanan event OnClick komponen TSpeedButton
BSpeed sehingga muncul suatu prosedur pada jendela Code
Editor.
procedure TFFastLine.BSpeedClick(Sender: TObject);
var
Time1, Time2, Zoom: Longint;
begin
Screen.Cursor:= crHourGlass;
try
Chart1.AnimatedZoom:= False;
Time1:= GetTickCount;
for Zoom:= 1 to 30 do Chart1.ZoomPercent(105);
for Zoom:= 1 to 30 do Chart1.ZoomPercent(95);
Time2:= GetTickCount;
Chart1.AnimatedZoom:= True;
Chart1.UndoZoom;
finally
Screen.Cursor:= crDefault;
end;

205

Showmessage('Waktu untuk mem-plot 2000 data'+#13+
'Sebanyak 61 kali : '+#13+
IntToStr(Time2-Time1)+' milidetik.');
end;

Waktu pertama kalinya plot data disimpan dalam variabel Time1
dengan memanggil metode GetTickCount, kemudian proses
pembesaran grafik dilakukan sebanyak 30 kali yang disusul
dengan proses pengecilan grafik sebanyak 30 kali. Waktu setelah
proses zoom tersebut disimpan dalam variabel Time2. Selanjutnya
grafik dikembalikan pada keadaan awal dengan memanggil
UndoZoom. Jadi, proses plot ulang data dilakukan sebanyak 61
kali, yaitu 60 kali untuk proses zoom dan sekali proses UndoZoom.
Oleh karena masing-masing TChartSeries mempunyai 1.000 data
maka data yang diplot pada keduanya adalah 2.000 data. Waktu
seluruh proses (dalam milidetik) kemudian ditampilkan pada suatu
pesan yang segera muncul ketika proses tersebut berakhir. Selama
proses plot data berlangsung, kursor berbentuk Hour-Glass dan
jika telah selesai bentuknya kembali pada Default.

Prosedur Event OnClick pada Komponen TCheckBox (CBuffered,
CDraw, dan CClip)
Kecepatan plot data dalam TChartSeries juga bergantung pada
nilai property BufferedDisplay, ada/tidaknya skala sumbu grafik
(property AxisVisible), dan nilai property ClipPoints komponen
TChart. Gunakan ketiga komponen TCheckBox yang terpasang
dalam form untuk mengendalikan nilai property komponen TChart
tersebut. Klik ganda masing-masing komponen TCheckBox
sehingga pada jendela Code Editor muncul tiga buah prosedur.
procedure TFFastLine.CBufferedClick(Sender: TObject);
begin
Chart1.BufferedDisplay:= CBuffered.Checked;
end;

procedure TFFastLine.CDrawClick(Sender: TObject);
begin
Chart1.AxisVisible:= CDraw.Checked;
end;

procedure TFFastLine.CClipClick(Sender: TObject);
begin
Chart1.ClipPoints:= CClip.Checked;
end;

206

Kecepatan plot data semakin lambat jika komponen-komponen
TCheckBox tersebut dicentang.

3.7 Menghubungkan Komponen TDBChart
dengan Komponen TTable
Suatu aplikasi grafik berbasis database sebenarnya lebih mudah
dibuat dengan komponen TDBChart. Data yang diplot pada
TChartSeries dapat diset melalui property DataSource-nya.
Dataset dapat berupa komponen TQuery maupun komponen
TTable. Pada bagian ini TChartSeries komponen TDBChart akan
dihubungkan dengan komponen TTable. Buat sebuah form dengan
nama FLingked dan simpan unit-nya dengan nama ULingked.
Pada form tersebut, letakkan sebuah komponen TDBChart, sebuah
komponen TPanel, sebuah komponen TDBNavigator, 2 (dua) buah
komponen TTable, 2 (dua) buah komponen TDataSource, dan 2
(dua) buah komponen TDBGrid. Ubah property komponen-
komponen tersebut seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, masing-masing nilainya
dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan
property Name.
TForm AutoSize True

Caption Linked Table Topic
Name FLinked
TPanel BevelOuter bvNone
(tab Standard) Color clWhite
Height 305
Left 0
Name Panel1

207

Top 0
Width 540
Ttable (tab BDE) Active True
sebanyak 2 buah
DatabaseName D:ProgramDatabase

IndexName (dikosongkan); CusNo
MasterFields (dikosongkan); CusNo
MasterSource (dikosongkan);
DataSource1
Name Table1; Table2
TableName customer.db; orders.db

TdataSource (tab DataSet Table1; Table2
Data Access)
Name DataSource1;
sebanyak 2 buah
DataSource2
TDBNavigator (tab DataSource DataSource1
Data Controls).
Flat True
Pasang dalam
Panel1 Height 25

Left 8

Top 8

VisibleButton hanya nbFirst; nbPrior;
nbNext; nbLast yang
bernilai True

TDBGrid Ctl3D False;
(tab Data Controls) DataSource DataSource1;
sebanyak 2 buah DataSource2

pasang dalam Height 120
Panel1 Left 8
Name DBGrid1; DBGrid2
Options.dgEditing False; True

208

Options.dgIndicator False

Options.dgRowLine False

Options.dgRowSelect True; False

Top 41; 172

Width 521

Biarkan property yang lain sesuai dengan nilai default-nya. Pada
komponen TDBChart, buat sebuah TChartSeries bertipe Bar tiga
dimensi. Klik tab Series, kemudian pilih subtab Format seperti
terlihat pada Gambar 3.1.

Gambar 3.1 Kotak dialog Editing Chart untuk subtab Format bertipe Bar

Parameter-parameter yang terdapat dalam subtab Format adalah:
1. ComboBox Style: menentukan bentuk bar yang digunakan
untuk menggambar TChartSeries.

209

2. CheckBox Color Each: mengendalikan warna yang akan
digambar pada titik TChartSeries. Jika ditandai maka setiap
titik TChartSeries akan diberi warna berbeda, jika sebaliknya
maka warna setiap titik TChartSeries sesuai dengan warna
yang dipilih dengan menekan tombol Color.
3. Tombol Color: untuk mencari warna yang akan diberikan pada
setiap titik TChartSeries jika CheckBox Color Each tidak
ditandai.
4. GroupBox Multi Bar: akan memberikan efek jika dalam
TDBChart yang sama mempunyai lebih dari satu TChartSeries.
5. CheckBox Use Origin: jika bernilai False maka nilai minimum
dari daftar nilai akan digunakan sebagai nilai awal sumbu
vertikal. Jika sebaliknya maka property YOrigin akan dipakai
sebagai titik awal sumbu vertikal.
6. Isian di sebelah Use Origin (property YOrigin): nilai yang
digunakan sebagai nilai awal sumbu vertikal grafik. Berlaku
jika CheckBox Use Origin dicentang.
7. SpinEdit % Bar Width: menentukan persentase lebar total bar
yang digunakan.
8. SpinEdit % Bar Offset: mengindikasikan penempatan bar
dalam persen dari ukuran bar.
9. CheckBox Dark Bar 3D Sides: mengontrol apakah sisi bar
akan diisi dengan warna bayangan atau tidak. Akan
memberikan efek jika grafik dalam bentuk 3D.
10. CheckBox Bar Side Margins: mengontrol apakah bar yang
ditampilkan pertama dan terakhir akan dipisahkan dari kotak
grafik.
11. CheckBox Auto Mark Position: mengontrol apakah Mark
TChartSeries akan direposisi jika terdapat mark yang saling
tumpang tindih.
Selanjutnya, klik subtab Data Source untuk menetapkan dataset
yang akan digunakan TChartSeries. Pilih Data Set, kemudian pilih
Tabel2 pada ComboBox Dataset. ComboBox Labels digunakan
untuk mengeset nilai x grafik. Pilih field SaleDate dari daftar fields

210

komponen Table2 dan pilih field AmountPaid sebagai nilai y grafik
pada ComboBox Bar sehingga sekarang subtab Data Source
menjadi seperti Gambar 3.2.

Gambar 3.2 Kotak dialog Editing Chart untuk subtab Data Source

Form FLinked ditampilkan dengan menekan komponen
TSpeedButton BShow yang terpasang pada form FOtherDemo di
mana komponen TGroupBox GBFeatures telah ditampilkan dan
komponen TRadioButton RLingked dipilih. Buka kembali prosedur
BShowClick pada unit UotherDemo, kemudian tambahkan kode
program untuk menampilkan form FLingked.
begin
end else begin
FDigital.ShowModal;
if RLinked.Checked then

211

FLinked.ShowModal;
end;
end;

Pastikan bahwa di folder D:ProgramDatabase telah ada file
database bernama customer.db, order.db, dan items.db. File
database tersebut disertakan dalam CD.

Prosedur Event OnDataChange pada Komponen TDataSource
(DataSource1)
Event ini terjadi ketika ada perubahan data pada dataset karena
proses scrolling data atau edit data. Klik ganda sel di sebelah
kanan event OnDataChange pada komponen TDataSource
DataSource1.
procedure TFLinked.DataSource1DataChange(Sender: TObject;
Field: TField);
begin
DBChart1.CheckDataSource(Series1);
end;

Metode CheckDataSource akan me-refresh semua data pada
TchartSeries, baik dari database Query, Table, atau sumber data
TChartSeries lain. Metode ini dapat dipanggil secara rutin jika kita
ingin menambahkan atau memodifikasi data yang ditampilkan
secara realtime pada TChartSeries. Jadi, data yang diplot pada
TChartSeries Series1 akan berubah ketika ada perubahan data
pada dataset Tabel2.

3.8 Membuat Grafik Mini yang Resizeable dan
Garis Divider
Ukuran komponen TChart dapat diubah sesuai perubahan ukuran
form induknya. Garis divider merupakan garis pembatas antara
titik baru dan titik lama yang diplot dalam TChartSeries. Buat
sebuah form baru dengan nama FMini dan simpan dalam unit
UMini. Pada form tersebut, tambahkan sebuah komponen TTimer,
2 (dua) buah komponen TPanel dan 4 buah komponen TChart.
Ubah property-nya seperti tabel berikut ini. Untuk property yang
mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan

212

oleh tanda titik koma. Sesuaikan berdasarkan urutan property
Name.
TForm BorderStyle bsSizeToolWin
Caption Mini Small Chart Topic
Height 148
Name FMini
Width 202
System)
Interval 1
Name Timer1

TPanel (tab Align alLeft; alClient
Standard)
Color clWhite
sebanyak 2
buah Name Panel1; Panel2
Width 97
TChart (tab Align alTop; alClient; alTop;
Additional) alClient
sebanyak 2
Height 56
buah. Pasang
pada Panel1, Name Chart1; Chart2; Chart3;
sisanya pada Chart4
Panel2

Untuk mengedit komponen TChart, klik ganda komponen tersebut
kemudian buat sebuah TChartSeries bertipe Bar 2 Dimensi dengan
nama BarSeries1 pada Chart1, dua buah TChartSeries bertipe Line
3 Dimensi dengan nama LineSeries1, dan LineSeries2 pada
Chart2. Kedua komponen TChart tersebut terpasang pada Panel1.
Pada Chart3, buat sebuah TChartSeries bertipe Pie 3 Dimensi

213

dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuah
TChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dan
sebuah TChartSeries bertipe Area 2 Dimensi dengan nama
AreaSeries1.
Klik subtab Axis dan hilangkan tanda centang pada CheckBox
Show Axis untuk semua komponen TChart. Property yang lain
dapat diubah sesuai kebutuhan.
Sebelum membuat prosedur dalam unit ini, buka kembali unit
UotherDemo, kemudian tambahkan beberapa kode pada prosedur
BShowClick untuk menampilkan form FMini melalui form
FOtherDemo.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
if RMini.Checked then
FMini.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FMini)
Nilai beberapa variabel dan plot data pada TChartSeries dilakukan
dalam prosedur event OnCreate. Deklarasikan variabel
ValueXChart2 dan ValueXChart4 bertipe Longint pada bagian
Public unit. Variabel pertama digunakan untuk menggambar garis
divider vertikal pada komponen TChart Chart2 dan variabel yang
kedua pada Chart4. Banyaknya data yang akan diplot pada
beberapa TChartSeries berdasarkan konstanta NumData. Beri nilai
30 pada konstanta tersebut dan ketikkan tepat di bawah kompiler
seperti berikut ini.
implementation

{$R *.dfm}

214

Const NumData = 30;

Kemudian klik ganda sel di sebelah kanan event OnCreate form
FMini dan tulis kode programnya.
procedure TFMini.FormCreate(Sender: TObject);
begin
ValueXChart2:= -1;
ValueXChart4:= NumData div 2;
BarSeries1.FillSampleValues(6);
PieSeries1.FillSampleValues(8);
LineSeries1.FillSampleValues(NumData);
AreaSeries1.FillSampleValues(NumData);
end;

Posisi awal garis divider vertikal pada komponen TChart Chart2
berada di luar kotak grafik, sedangkan pada Chart4 berada tepat di
tengah karena banyaknya data yang diplot pada TChartSeries
AreaSeries1 dan LineSeries3 berdasarkan nilai konstanta
NumData (30 data). Metode FillSampleValues akan memplot nilai
acak pada suatu TChartSeries dengan rentang data sebanyak
angka dalam tanda kurung.

Prosedur Event OnResize pada TForm (FMini)
Kode program yang dideklarasikan pada event OnResize akan
segera dijalankan ketika ukuran form diubah. Klik ganda sel di
sebelah kanan event tersebut, kemudian ketikkan kodenya.
procedure TFMini.FormResize(Sender: TObject);
begin
Panel1.Width:= ClientWidth div 2;
Chart1.Height:= ClientHeight div 2;
Chart3.Height:= ClientHeight div 2;
end;

Property Align komponen TPanel Panel1 bernilai alLeft sehingga
jika form di-resize maka property Height akan mengikuti
perubahan ukuran form. Property Width-nya ditentukan sebagai
setengah dari perubahan nilai property ClientWidth form. Ukuran
komponen TPanel Panel2 secara otomatis akan mengikuti
perubahan ukuran form dan komponen Panel1 karena property
Align-nya bernilai alClient, begitu juga dengan ukuran komponen
TChart Chart2 yang akan mengikuti perubahan ukuran Panel1 dan
komponen Chart1. Ukuran Chart4 juga akan mengikuti perubahan

215

ukuran Panel2 dan komponen Chart3 karena property Align kedua
komponen TChart tersebut (Chart2 dan Chart4) bernilai alClient.
Pada komponen TChart Chart1 dan Chart3, nilai property Align-
nya adalah alTop dan perubahan ukuran Panel1 dan Panel2 hanya
akan mengubah lebar (property Width) kedua komponen TChart
tersebut sementara tingginya (property Height) tetap. Untuk
menyesuaikan ukurannya, property Height komponen TChart
Chart1 ditentukan sebagai setengah dari nilai property ClientHeight
komponen TPanel Panel1 dan property Height komponen Chart3
juga ditentukan sebagai setengah dari nilai property ClientHeight
komponen Panel2.

Prosedur Event OnClose dan OnShow pada TForm (FMini)
Event OnClose terjadi ketika form FMini ditutup, sedangkan event
OnShow akan dijalankan setiap kali form ditampilkan. Klik ganda
sel di sebelah kanan masing-masing event sehingga pada jendela
Code Editor muncul dua buah prosedur.
procedure TFMini.FormClose(Sender: TObject; var Action:
TCloseAction);
begin
Timer1.Enabled:= False;
end;

procedure TFMini.FormShow(Sender: TObject);
begin
Timer1.Enabled:= True;
end;

Saat desain property Enabled komponen TTimer Timer1 bernilai
False, komponen TTimer tersebut akan diaktifkan setiap kali form
ditampilkan dan dinonaktifkan kembali jika form ditutup.

Animasi plot data pada TChartSeries dilakukan dalam event
OnTimer komponen TTimer Timer1. Klik ganda komponen TTimer
tersebut, kemudian buat sebuah prosedur lokal RefreshChart pada
prosedur yang muncul.
procedure TFMini.Timer1Timer(Sender: TObject);

procedure RefreshChart(AOwner: TChart;

216

var ValueXChart: Longint);
var
a: Longint;
LastValue: Double;
begin
Inc(ValueXChart);
if ValueXChart >= NumData then ValueXChart:= 0;
for a:= 0 to AOwner.SeriesCount-1 do
begin
if ValueXChart = 0 then
begin
with AOwner do begin
LeftAxis.Automatic:= True;
LeftAxis.SetMinMax(MinYValue(LeftAxis),
MaxYValue(LeftAxis));
end;
LastValue:= AOwner.Series[a].YValues.Last;
end else
LastValue:= AOwner.Series[a].YValue[ValueXChart-1];

AOwner.Series[a].YValue[ValueXChart]:= LastValue +
Random(ChartSamplesMax) -
(ChartSamplesMax div 2);
end;
end;
var
DataBar: Longint;
begin
RefreshChart(Chart2, ValueXChart2);
RefreshChart(Chart4, ValueXChart4);

with PieSeries1 do
RotationAngle:= (RotationAngle+1) mod 359;

with BarSeries1 do begin
DataBar:= Random(Count);
YValue[DataBar]:= YValue[DataBar]*(80.0+Random(40))/100.0;
end;
end;

Prosedur lokal RefreshChart berguna untuk mengubah nilai suatu
TChartSeries setiap detik berdasarkan posisi nilai x-nya (variabel
ValueXChart). Setiap detik nilai variabel ValueXChart akan
bertambah 1 (satu) melalui prosedur Inc. Nilai variabel tersebut
dikembalikan pada nilai 0 (nol) jika telah sama dengan banyaknya
data (konstanta NumData). Jika posisi x grafik kembali ke awal
(bernilai 0) maka dengan metode SetMinMax, nilai skala minimum
dan maksimum sumbu kiri grafik diisi dengan nilai minimum dan
maksimum sumbu kiri grafik tersebut. Nilai y yang terakhir
disimpan dalam variabel LastValue. Jika posisi x grafik tidak 0
(nol) maka nilai variabel LastValue sama dengan nilai y pada

217

posisi x saat itu. Nilai variabel LastValue tersebut ditambah dengan
suatu nilai acak menjadi nilai y grafik pada posisi x yang sekarang.
Seluruh TChartSeries yang terdapat pada komponen TChart
Chart2 dan Chart4 akan diplot dengan prosedur lokal tersebut, di
mana nilai x untuk TChartSeries pada Chart2 berasal dari nilai
variabel ValueXChart2 sedangkan pada Chart4 berasal dari nilai
variabel ValueXChart4. Dengan kata lain, variabel ValueXChart
pada prosedur lokal RefreshChart diganti dengan ValueXChart2
atau ValueXChart4, bergantung pada nilai variabel AOwner-nya.
TChartSeries bertipe Pie yang terdapat dalam Chart1 akan terus
berputar dengan sudut putar sama dengan nilai sisa pembagian
sudut putar saat itu (setelah ditambah 1 derajat) terhadap 359
derajat. Nilai y yang diplot pada TChartSeries bertipe bar dan
berasal dari nilai y saat itu dikalikan dengan 80% nilai acak antara
0 sampai 39.

Prosedur Event OnAfterDrawValue pada TChartSeries Komponen
TChart (LineSeries2 dan LineSeries3)
Setelah data diplot pada TChartSeries LineSeries2 dan
LineSeries3, sebuah garis divider vertikal segera digambar pada
komponen TChart di mana kedua TChartSeries tersebut berada
(Chart2 dan Chart4). Klik ganda sel di sebelah kanan event
OnAfterDrawValue pada masing-masing TChartSeries tersebut.
procedure TFMini.LineSeries2AfterDrawValues(Sender: TObject);
begin
if ValueXChart2 >= 0 then
Pen.Color:= clRed;
DoVertLine(Series[0].CalcXPos(ValueXChart2),
ChartRect.Top+1,
ChartRect.Bottom-1);
end;
end;

procedure TFMini.LineSeries3AfterDrawValues(Sender: TObject);
begin
if ValueXChart4 >= 0 then
with Chart4,Canvas do begin
Pen.Color:= clBlue;
DoVertLine(Series[0].CalcXPos(ValueXChart4),
ChartRect.Top+1,
ChartRect.Bottom-1);
end;

218

end;

Garis divider vertikal berwarna merah digambar pada TChartSeries
LineSeries2 dan berwarna biru pada TChartSeries LineSeries3
dengan metode DoVertLine. Metode DoVertLine ditulis dengan
syntax:
procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;

Metode ini akan menggambar garis vertikal dari Y0 sampai Y1
pada posisi horisontal X. Variabel Y0 merupakan posisi atas kotak
grafik ditambah 1 pixel; variabel Y1 diisi dari nilai posisi bawah
kotak grafik setelah dikurangi 1 pixel; dan posisi horisontal X
diperoleh menggunakan metode CalXPos berdasarkan nilai x
masing-masing TChartSeries.

3.9 Membuat Halaman Grafik
TChartSeries yang telah diplot dapat dibagi dalam beberapa
halaman bergantung jumlah total data dan jumlah data per
halaman. Halaman-halaman tersebut kemudian dapat ditelusuri
dengan metode-metode scroll grafik. Buat sebuah form baru
dengan nama FPaging dan simpan dalam unit UPaging. Pada form
tersebut, letakkan sebuah komponen TChart, sebuah komponen
TPanel, sebuah komponen TSpinEdit, sebuah komponen
TCheckBox, 2 (dua) buah komponen TLabel, dan 4 (empat) buah
komponen TSpeedButton. Ubah property komponen-komponen
tersebut seperti tabel berikut ini. Untuk property yang mempunyai
nilai lebih dari satu, masing-masing nilai dipisahkan oleh tanda
titik koma. Sesuaikan berdasarkan urutan property Name.
TForm AutoSize True

Caption Linked Table Topic

Name FLinked

219

Standard)
Color clWhite
Height 90

Left 0

Name Panel1
Top 407
Width 540
TSpinEdit (tab Left 235
Samples).
MaxValue 100000
Pasang pada
Panel1 MinValue 0

Name SEPaging

Top 8
TCheckBox Caption Scale Last Page
(tab Standard).
Left 290
Pasang dalam
Panel1 Name CScale
Top 10
Tlabel (tab Caption Points Per Page :; (bebas)
Standard)
sebanyak 2 Left 131; 181
buah. Pasang
Name Label1; LCurrent
dalam Panel1
Top 11; 38
Transparent True
TSpeedButton Caption &First; &Previous; &Next; &Last
(tab Additional)
sebanyak 4 Flat True
buah. Pasang
Glyph Klik ganda sel di sebelah kanan
dalam Panel1
property ini, load gambar
BFirst.bmp; BPrevious.bmp;
BNext.bmp; BLast.bmp

220

Height 22
Left 69; 165; 261; 357
Name BFirst; BPrevious; BNext; BLast

Top 58

Width 88

Biarkan nilai property yang lain sesuai default-nya. Untuk
komponen TChart, klik ganda komponen tersebut kemudian pilih
subtab Series pada tab Chart. Tekan tombol Add... untuk
menambahkan sebuah TChartSeries bertipe Line 2 Dimensi dan
beri nama Series1. Ubah property yang lain sesuai dengan
kebutuhan.
Form FPaging akan ditampilkan melalui form FOtherDemo ketika
pengguna menekan komponen TSpeedButton BShow di mana
komponen TGroupBox GBFeatures telah ditampilkan dan
komponen TRadioButton RPaging dipilih. Klik ganda komponen
TSpeedButton tersebut dan tambahkan kode untuk menampilkan
form FPaging pada prosedur BShowClick.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
FMini.ShowModal;
if RPaging.Checked then
FPaging.ShowModal;
end;
end;

221

Prosedur Event OnCreate pada TForm (FPaging)
Event OnCreate form hanya akan dijalankan sekali saat form
dibangun. Klik ganda sel di sebelah kanan event tersebut,
kemudian ketikkan kode programnya.
procedure TFPaging.FormCreate(Sender: TObject);
begin
SEPaging.Value:= 18;
Chart1PageChange(Chart1);
end;

Data sebanyak 100 diplot dalam TChartSeries dengan metode
FillSampleValues. Property Value komponen TSpinEdit SEPaging
diinisialisasi dengan nilai 18. Nilai property tersebut menunjukkan
banyaknya data per halaman sebagai pengganti SpinEdit Points
per Page pada subtab Paging (property MaxPointsPerPage) yang
nilainya dapat diubah secara run-time. Prosedur
Chart1PageChange merupakan prosedur event OnPageChange
pada komponen TChart Chart1.

Prosedur Event OnPageChange pada Komponen TChart (Chart1)
Event OnPageChange terjadi ketika property Page komponen
TChart telah diubah dan sebelum halaman grafik tersebut berubah.
Property MaxPointsPerPage (SpinEdit Points per Page pada subtab
Paging) harus lebih besar dari 0 (nol) untuk mengaktifkan
mekanisme pemberian nomor halaman secara otomatis. Klik
ganda sel di sebelah kanan event tersebut.
procedure TFPaging.Chart1PageChange(Sender: TObject);
begin
Chart1.UndoZoom;
LCurrent.Caption:= 'Current/Total : '+
IntToStr(Chart1.Page)+'/'+IntToStr(Chart1.NumPages);
BFirst.Enabled:= BPrevious.Enabled;
BPrevious.Enabled:= Chart1.Page > 1;
BNext.Enabled:= Chart1.Page < Chart1.NumPages;
BLast.Enabled:= BNext.Enabled;
end;

Untuk menghitung banyaknya halaman grafik dengan benar,
komponen TChart harus tidak dalam keadaan
diperbesar/diperkecil, jadi coba panggil metode UndoZoom.

222

Informasi suatu halaman terhadap total halaman grafik
ditampilkan melalui property Caption komponen TLabel. Property
Page komponen TChart mengeset halaman grafik saat ini,
sedangkan property NumPages menunjukkan total halaman grafik.
Untuk grafik yang mempunyai halaman lebih dari satu, komponen
TSpeedButton BFirst dapat diakses tergantung aktif/tidaknya
komponen BPrevious. Komponen BPrevious akan aktif jika
halaman grafik yang sekarang ditampilkan bukan halaman
pertama. Dan komponen BNext akan aktif jika halaman grafik
yang sekarang ditampilkan bukan halaman terakhirnya, sedang
aktif/tidaknya komponen BLast tergantung pada aktif/tidaknya
komponen BNext. Jika grafik hanya terdiri atas satu halaman
maka keempat komponen TSpeedButton tersebut tidak aktif.

Prosedur Event OnChange pada Komponen TSpinEdit (SEPaging)
Komponen TSpinEdit SEPaging merupakan pengganti
SpinEdit Points per Page pada subtab Paging, perubahan nilainya
akan mempengaruhi banyaknya data per halaman (nilai property
MaxPointsPerPage komponen TChart). Klik ganda sel di sebelah
kanan event OnChange komponen TSpinEdit tersebut kemudian
ketikkan kode programnya pada prosedur SEPagingChange yang
muncul.

procedure TFPaging.SEPagingChange(Sender: TObject);
begin
Chart1.MaxPointsPerPage:= SEPaging.Value;
Chart1PageChange(Chart1);
end;

Halaman grafik mungkin akan berubah setiap kali ada perubahan
nilai property Value komponen TSpinEdit SEPaging sehingga
prosedur Chart1PageChange perlu dipanggil kembali untuk
menyesuaikan keadaan beberapa komponen.

223

Prosedur Event OnClick pada Komponen TCheckBox (CScale)
Jika saat mengedit komponen TChart Anda tidak menandai
CheckBox Scale Last Page pada subtab Paging maka halaman
terakhir akan ditampilkan dengan range sumbu horisontal grafik
sama dengan halaman yang lain. Jika sebaliknya maka skala
halaman terakhir grafik akan diatur berdasarkan banyaknya titik
yang tampak pada halaman terakhir tersebut. Komponen
TCheckBox CScale berfungsi untuk mengontrol property
ScaleLastPage komponen TChart Chart1. Klik ganda komponen
TCheckBox tersebut.
procedure TFPaging.CScaleClick(Sender: TObject);
begin
Chart1.ScaleLastPage:= CScale.Checked;
end;

Prosedur Event OnClick pada Komponen TSpeedButton (BFirst,
BPrevious, BNext, dan BLast)
Untuk menampilkan suatu halaman ke halaman lain, manfaatkan
keempat komponen TSpeedButton tersebut. Blok keempat
komponen tersebut dan isi sel di sebelah kanan event OnClick
dengan nama prosedur ButtonClick, kemudian tekan tombol Enter.
procedure TFPaging.ButtonClick(Sender: TObject);
begin
if Sender = BFirst then
Chart1.Page:= 1 else
if Sender = BPrevious then
Chart1.PreviousPage else
if Sender = BNext then
Chart1.NextPage else
Chart1.Page:= Chart1.NumPages;
end;

Jika pengguna menekan komponen BFirst maka halaman
pertama grafik akan ditampikan. Jika BPrevious ditekan maka
metode PreviousPage akan membawa ke halaman sebelumnya,
sedangkan untuk menampilkan halaman selanjutnya, panggil
metode NextPage, yaitu ketika pengguna menekan komponen
BNext. Halaman yang terakhir akan ditampilkan ketika pengguna
menekan komponen BLast.

224

3.10 Menampilkan Nilai Statistik dalam
TChartSeries Bertipe Line
Nilai statistik data dapat dibuat dengan mengeset property Data
Source suatu TChartSeries dengan suatu fungsi statistik seperti
Average, High, dan Low. Buat sebuah form baru lagi, beri nama
FstatisticBar, dan simpan dalam unit UStatisticBar. Kemudian,
tambahkan sebuah komponen TChart, sebuah komponen TPanel,
sebuah komponen TTimer, 3 (tiga) buah komponen
TSpeedButton, dan 3 (tiga) komponen TCheckBox. Ubah property
komponen-komponen tersebut seperti tabel berikut ini. Untuk
property yang mempunyai nilai lebih dari satu, masing-masing
nilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan
urutan property Name.
Nama
Nama Object Nilai
Property
TForm AutoSize True
Caption Statistic Bar Series Topic
Name FStatisticBar
Standard)
Color clWhite
Height 72
Left 0
Name Panel1
Top 407

Width 540
System)
Interval 100

225

Name Timer1
TSpeedButton Caption &Print Graph; Copy to
(tab Additional) Clipboard; &Run
sebanyak 3
Cursor crHandPoint
buah. Pasang
dalam Panel1. Flat True
Height 22; 22; 54

Left 280; 280; 427
Name BPrint; BCopy; BRun
Top 10; 10; 42
Width 113; 113; 102

TCheckBox Caption View 3D; Two Bar Series; Bar
(tab Standard) Visible
sebanyak 3
Checked False; False; True
buah. Pasang
dalam Panel1. Left 15
Name CView; CTwoBar; CBarVisible
Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Untuk
komponen TChart, tambahkan sebuah TChartSeries bertipe Bar 3
Dimensi, lalu beri nama Series1. Tambahkan juga 3 (tiga) buah
TChartSeries bertipe Line 3 dimensi dengan nama BiggestSeries,
AverageSeries, dan SmallestSeries. Ubah judul keempat
TChartSeries tersebut dengan menekan tombol Title pada subtab
Series (Series, Biggest, Average, dan Smallest). Tampilkan legend
grafik dengan memberi tanda centang pada CheckBox Visible
pada subtab Legend. Sesuaikan property yang lain dengan
kebutuhan.
Untuk menampilkan form FstatisticBar, tambahkan perintah pada
prosedur BShowClick. Buka kembali unit UOtherDemo dan klik
ganda komponen TSpeedButton BShow sehingga kursor jendela

226

Code Editor akan berada pada prosedur tersebut. Sekarang
prosedur BShowClick menjadi seperti berikut ini.
begin
end else begin
FDigital.ShowModal;
FLinked.ShowModal;
FMini.ShowModal;
if RPaging.Checked then
FPaging.ShowModal;
if RStatisticBar.Checked then
FStatisticBar.ShowModal;
end;
end;

Prosedur Event OnCreate pada TForm (FStatisticBar)
Prosedur ini berisi inisialisasi beberapa property ketika form
pertama kali dibangun. Klik ganda sel di sebelah kanan event
OnCreate, kemudian ketikkan kode program berikut.
procedure TFStatisticBar.FormCreate(Sender: TObject);
begin
TeeEraseBack:= False;
NewBar:= nil;
Chart1.View3D:= CView.Checked;
Chart1.Chart3DPercent:= 35;

Series1.Fillsamplevalues(6);
Series1.Dark3D:= Chart1.IsScreenHighColor;
end;

Deklarasikan terlebih dahulu variabel NewBar bertipe TBarSeries
dalam bagian public unit. Variabel ini dipakai untuk membuat
sebuah TChartSeries bertipe Bar secara run-time sehingga pada
event OnCreate diberi nilai nil. Tampilan grafik dalam 3D
bergantung pada nilai property Checked komponen TCheckBox
Cview. Property Chart3DPercent ditentukan bernilai 35%. Data
sebanyak 6 (enam) titik diplot pada TChartSeries Series1 dengan
metode FillSampleValues. Property Dark3D Series1 (CheckBox

227

Dark Bar 3D Sides pada subtab Format) nilainya ditentukan
berdasarkan mode warna grafik yang dipakai dan bernilai True jika
dipakai mode lebih dari 256 warna dengan metode
IsScreenHighColor.

Prosedur Event OnAfterDraw pada Komponen TChart (Chart1)
Event OnAfterDraw hanya akan dipanggil setelah komponen
TChart tersebut telah menggambar semua TChartSeries yang
terdapat di dalamnya. Event ini berisi kode untuk menampilkan
teks pada masing-masing TChartSeries statistik yang
menginformasikan nilai statistik data. Klik ganda sel di sebelah
event OnAfterDraw komponen TChart tersebut, kemudian ketikkan
kode programnya.
procedure TFStatisticBar.Chart1AfterDraw(Sender: TObject);
begin
if not CTwoBar.Checked then
Brush.Style:= bsClear;
Font.PixelsPerInch:= Screen.PixelsPerInch;
Font.Size:= 10;
Font.Style:= [fsBold,fsItalic];
Font.Color:= AverageSeries.SeriesColor;
TextOut(ChartXCenter,
AverageSeries.CalcYPos(0),
AverageSeries.Title+' '+
AverageSeries.ValueMarkText[0]);

Font.Color:= BiggestSeries.SeriesColor;
BiggestSeries.CalcYPos(0),
BiggestSeries.Title+' '+
BiggestSeries.ValueMarkText[0]);
Font.Color:= SmallestSeries.SeriesColor;
SmallestSeries.CalcYPos(0),
SmallestSeries.Title+' '+
SmallestSeries.ValueMarkText[0]);
end;
end;

Event ini diberlakukan jika komponen TCheckBox CTwoBar tidak
dicentang. Pola TBrush ditentukan bernilai bsClear untuk
membersihkan pola sebelumnya. Property PixelsPerInch digunakan
untuk memastikan bahwa font yang disalin dari kanvas ke printer
mempunyai ukuran yang sama. Faktor konversi antara pixel dan

228

inci untuk font tersebut mengambil nilai yang sama dengan nilai
pada layar monitor. Huruf yang dipakai untuk menginformasikan
nilai statistik dalam TChartSeries statistik berukuran 10 pixel
dalam huruf tebal dan miring. Warna huruf diambil dari warna
masing-masing TChartSeries tersebut. Untuk menuliskan teks
dalam kanvas (komponen TChart Chart1), digunakan metode
TextOut yang mempunyai syntax:
procedure TextOut(X, Y: Integer; const Text: string);

Penulisan teks tersebut (isi variabel Text) dilakukan pada
koordinat (X, Y). Koordinat X untuk semua teks ditentukan dari
nilai tengah koordinat horisontal grafik yang diperoleh dengan
metode ChartXCenter. Nilai yang dihasilkan metode ini tidak sama
dengan property Width dibagi dua karena margin grafik, margin
sumbu, lebar legend grafik, dan sebagainya bukan bagian dari
ukuran horisontal grafik. Nilai Y berasal dari koordinat vertikal
yang merupakan hasil pemanggilan metode CalYPos pada masing-
masing TChartSeries statistik. Teks yang ditampilkan terdiri atas
judul masing-masing TChartSeries tersebut (property Title
TChartSeries) dan nilai Mark-nya (property ValueMarkText
TChartSeries).

Prosedur Event OnGetLegendText pada Komponen TChart
(Chart1)
Teks informasi nilai statistik pada prosedur event OnAfterDraw di
atas hanya ditampilkan ketika komponen TCheckBox CTwoBar
tidak dicentang. Untuk menginformasikan nilai statistik jika
komponen TCheckBox tersebut dicentang, gunakan legend grafik
dengan mengganti nilai property LegendText melalui event
OnGetLegendText. Klik ganda sel di sebelah kanan event
OnGetLegendText pada komponen TChart Chart1.
procedure TFStatisticBar.Chart1GetLegendText(Sender:
TCustomAxisPanel;LegendStyle: TLegendStyle; Index:
Integer; var LegendText: String);
begin
if CTwoBar.Checked then
LegendText:= Chart1.Series[Index].Title+' : '+LegendText
else LegendText:= Chart1.Series[Index].Title;
end;

229

Jika property Checked komponen TCheckBox CTwoBar bernilai
True, teks yang ditampilkan pada legend grafik terdiri atas judul
setiap TChartSeries ditambah nilai property LegendText-nya. Jika
sebaliknya, legend grafik hanya menampilkan judul masing-
masing TChartSeries.

Simulasi plot data pada TChartSeries Series1 dilakukan
menggunakan komponen TTimer Timer1. Klik ganda komponen
TTimer tersebut sehingga pada event OnTimer muncul sebuah
nama prosedur Timer1Timer.
procedure TFStatisticBar.Timer1Timer(Sender: TObject);
var
t: Longint;
begin
t:= Random(Series1.Count);
Series1.YValue[t]:= Series1.YValue[t]+Random(50)-25;
if Random(100) < 8 then
Series1.BarStyle:= TBarStyle(Random(1 +
Ord(High(TBarStyle))));
if Random(100) < 2 then
CView.Checked:= not CView.Checked;
end;

Nilai Y yang diplot pada indeks t berasal dari nilai Y tersebut
ditambah dengan suatu fungsi nilai acak. Variabel t berasal dari
nilai acak banyaknya data dalam TChartSeries Series1, yaitu 6
data. Style TChartSeries Series1 akan berubah jika jumlah nilai
acak dengan rentang data 100 kurang dari nilai 8. Fungsi Ord
akan menghasilkan posisi ordinal dari suatu eksepsi Ordinal-type
(dalam tanda kurung). Fungsi High menghasilkan nilai tertinggi
dari range bertipe TBarStyle.
Jika nilai acak hasil deklarasi fungsi nilai Y tersebut kurang dari
nilai 2 maka secara otomatis tanda centang pada komponen
TCheckBox akan dihilangkan kembali.

230

Judul

Recommended

Recommended

More Related Content

More from Nurdin Al-Azies

More from Nurdin Al-Azies (20)

Judul