Spesifikasi:                                            Ukuran: 14x21 cm                                             Tebal...
BAB 3BEBERAPA TOPIK TAMBAHANUNTUK SUATU APLIKASITopik-topik tambahan yang akan dipaparkan berikut ini adalahuntuk suatu ap...
masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkanurutan property Name): Nama Object       Nama Property       ...
Font.Size           8               Font.Style.fsBold   True; False               Height              14; 103             ...
Name                 BClose; BExpand;                                        BFeatures; Bshow                   Top       ...
Prosedur Event OnMouseDown pada TImage (IOtherDemo)Form FOtherDemo tidak dapat digeser karena propertyBorderStyle bernilai...
Pada tab event TForm, klik ganda sel di sebelah kanan OnCreatedan ketikkan kode program berikut ini.procedure TFOtherDemo....
end;Kelompok menu dalam komponen TGroupBox akan ditampilkanberdasarkan sender prosedur ButtonClick, termasuk posisi atasko...
dan scrolling grafik per halaman.; if Sender = RStatisticBar then LNotes.Caption := Membuat nilai statistik pada +   TChar...
TChart            Transparent    True TPanel (tab       BevelOuter     bvNone Standard)                   Color          c...
sebuah TChartSeries bertipe Line dua dimensi (tanda centangpada parameter 3D dihilangkan) dengan nama Series1 dan ubahnila...
variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankanperintah event OnClick komponen TCheckBox CCross.Prosedur ...
end; end;var ValueX, ValueY: Double;begin if (OldX <> -1) then begin   DrawCross(OldX, OldY);   OldX:= -1;    end; if PtIn...
dari 1 Mode     pmBlack         Selalu berwarna hitam          pmWhite         Selalu berwarna putih          pmNop       ...
Move To sama dengan menentukan property PenPos TPen, sertadilakukan sebelum memanggil metode Line To. Metode Line Tomengga...
Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada didalam kotak grafik Chart1 dengan syntax sebagai berikut:funct...
OldX:= -1;end;Prosedur Event OnClick pada Komponen TSpeedButton (BColor)Warna kursor Cross dapat diubah dengan mengubah ni...
Warna yang terpilih ketika kotak dialog Color ditampilkan samadengan nilai variabel CrossHairColor saat itu dan pada saat ...
Nama Nama Object                                 Nilai                    PropertyTForm            AutoSize      True     ...
(tab Standard)   Caption         Read This :; Gunakan tombol                                  panah dan Page Up/Page seban...
procedure TFKeyboard.FormCreate(Sender: TObject);begin Series1.FillSampleValues(500);end;Prosedur Event OnShow pada TForm ...
VK_RIGHT, VK_DOWN : Chart1.ZoomPercent(90);  end;  exit;  end else  Case key of   VK_LEFT : aX:= XRange/100;   VK_RIGHT : ...
ssLeft      Tombol kiri mouse ditekan            ssRight     Tombol kanan mouse ditekan            ssMiddle    Tombol teng...
sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbuvertikal tergantung pada data random yang di-plot dalamTChart...
Pesan    tersebut tidak akan muncul  ketika penggunamenghilangkan tanda centang pada komponen TCheckBoxClimits.3.4 Menguba...
Top           407                    Width         540 TGroupBox          Caption       Style (tab Standard).             ...
bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkanjendela Object Inspector dan klik ganda sel di sebelah ka...
Prosedur Event OnClick pada Komponen TSpeedButton (BBrowsedan BClear)Komponen TSpeedButton BBrowse berfungsi untuk mencari...
Seluruh gambar background akan ditampilkan seukurankomponen TChart meskipun ukuran gambar tersebut terlalu besar.Dalam mod...
3.5 Digital SeriesSeluruh sistem operasi dalam komputer sebenarnya menggunakankombinasi bilangan biner, yaitu 0 (nol) dan ...
(tab             Cursor           crHandPoint Additional).                  Flat             True Pasang dalam Panel1     ...
if RDigital.Checked then     FDigital.ShowModal;   end;end;Prosedur Event OnCreate pada TForm (FDigital)Prosedur event OnC...
Variabel GainData berguna untuk menaikkan TChartSeries padasuatu posisi sehingga keempat TChartSeries tersebut tidak salin...
Selain untuk mengaktifkan komponen TTimer Timer1, komponenTSpeedButton BRun juga digunakan untuk menonaktifkannberdasarkan...
Prosedur   Event    OnGetLegendTex    pada    Komponen     TChart(Chart1)Event OnGetLegendText digunakan untuk mengganti p...
TPanel (tab      BevelOuter     bvNone Standard)                  Color          clWhite                  Height         4...
ditampilkan. Property yang lain dapat diubah sesuai kebutuhanAnda.Form FFastLine ditampilkan melalui form FOtherDemo denga...
TeeChart menghapus latar belakang panel ketika ada perubahanukuran grafik. Property BufferedDisplay secara default bernila...
Showmessage(Waktu untuk mem-plot 2000 data+#13+          Sebanyak 61 kali : +#13+          IntToStr(Time2-Time1)+ milideti...
Kecepatan plot data semakin lambat jika komponen-komponenTCheckBox tersebut dicentang.3.7 Menghubungkan Komponen TDBChart ...
Top                 0                      Width               540Ttable (tab BDE)      Active              Truesebanyak 2...
Options.dgIndicator    False                     Options.dgRowLine      False                     Options.dgRowSelect    T...
2. CheckBox Color Each: mengendalikan warna yang akan   digambar pada titik TChartSeries. Jika ditandai maka setiap   titi...
komponen Table2 dan pilih field AmountPaid sebagai nilai y grafikpada ComboBox Bar sehingga sekarang subtab Data Sourcemen...
FLinked.ShowModal;   end;end;Pastikan bahwa di folder D:ProgramDatabase telah ada filedatabase bernama customer.db, order....
oleh tanda titik koma. Sesuaikan berdasarkan urutan propertyName. Nama Object     Nama Property                  Nilai TFo...
dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuahTChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dan...
Const NumData = 30;Kemudian klik ganda sel di sebelah kanan event OnCreate formFMini dan tulis kode programnya.procedure T...
ukuran Panel2 dan komponen Chart3 karena property Align keduakomponen TChart tersebut (Chart2 dan Chart4) bernilai alClien...
var ValueXChart: Longint); var  a: Longint;  LastValue: Double; begin  Inc(ValueXChart);  if ValueXChart >= NumData then V...
posisi x saat itu. Nilai variabel LastValue tersebut ditambah dengansuatu nilai acak menjadi nilai y grafik pada posisi x ...
end;Garis divider vertikal berwarna merah digambar pada TChartSeriesLineSeries2 dan berwarna biru pada TChartSeries LineSe...
TPanel (tab        BevelOuter    bvNoneStandard)                   Color         clWhite                   Height        9...
Height            22                 Left              69; 165; 261; 357                 Name              BFirst; BPrevio...
Prosedur Event OnCreate pada TForm (FPaging)Event OnCreate form hanya akan dijalankan sekali saat formdibangun. Klik ganda...
Informasi suatu halaman terhadap total halaman grafikditampilkan melalui property Caption komponen TLabel. PropertyPage ko...
Prosedur Event OnClick pada Komponen TCheckBox (CScale)Jika saat mengedit komponen TChart Anda tidak menandaiCheckBox Scal...
3.10 Menampilkan Nilai Statistik dalam     TChartSeries Bertipe LineNilai statistik data dapat dibuat dengan mengeset prop...
Name           Timer1 TSpeedButton       Caption        &Print Graph; Copy to (tab Additional)                  Clipboard;...
Code Editor akan berada pada prosedur tersebut. Sekarangprosedur BShowClick menjadi seperti berikut ini.procedure TFOtherD...
Dark Bar 3D Sides pada subtab Format) nilainya ditentukanberdasarkan mode warna grafik yang dipakai dan bernilai True jika...
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Membangun sistem akuisisi data berbasis database dengan delphi
Upcoming SlideShare
Loading in …5
×

Membangun sistem akuisisi data berbasis database dengan delphi

1,855 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,855
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Membangun sistem akuisisi data berbasis database dengan delphi

  1. 1. 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) yangkhusus 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.
  2. 2. BAB 3BEBERAPA TOPIK TAMBAHANUNTUK SUATU APLIKASITopik-topik tambahan yang akan dipaparkan berikut ini adalahuntuk suatu aplikasi akuisisi data dengan komponen TChart.Beberapa topik dapat ditambahkan dalam setting program aplikasiSistem Akuisisi Data pada Bab 2 dan sebagian yang lainmerupakan aplikasi tambahan yang dapat diterapkan padaaplikasi yang lain. Manfaatkan form FOtherDemo (tersimpandalam unit UOtherDemo) yang telah dibuat pada Bab 1 untukmenampung topik-topik tersebut. Untuk membuat suatu topik,dibuat form baru.3.1 Mendesain Form FOtherDemoPada form FOtherDemo, letakkan sebuah komponen TImage, 2(dua) buah komponen TGroupBox, 2 (dua) buah komponenTLabel, 4 (empat) buah komponen TSpeedButton, dan 10(sepuluh) buah komponen TRadioButton. Kemudian, ubahlahproperty komponen-komponen tersebut seperti tabel berikut ini(untuk property yang mempunyai nilai lebih dari satu, masing- 169
  3. 3. masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkanurutan 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 Arial170
  4. 4. 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; TrueTSpeedButton Caption (kosongkan); Expand...(tab Form; Features...; Show meAdditional) The Demo !sebanyak 4 Cursor crHandPointbuah. Pasangdalam 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
  5. 5. 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; 128Biarkan nilai-nilai property yang lain sesuai nilai default-nya.172
  6. 6. Prosedur Event OnMouseDown pada TImage (IOtherDemo)Form FOtherDemo tidak dapat digeser karena propertyBorderStyle bernilai bsNone. Untuk mengatasinya, buat eventOnMouseDown pada komponen TImage. Klik ganda sel di sebelahkanan event OnMouseDown komponen tersebut dan ketikkankode 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 padasaat form ditutup, yaitu menampilkan kembali form FMainDemoyang telah disembunyikan saat form ini dibangkitkan. Pada tabevent TForm, klik ganda sel di sebelah kanan OnClose dan ketikkode 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 formFOtherDemo kemudian menampilkan kembali form FMainDemo(yaitu memanggil prosedur event OnClose yang telah dibuat). Klikganda sel di sebelah kanan event OnClick komponen tersebutkemudian 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 formFOtherDemo dapat ditentukan dalam prosedur event OnCreate. 173
  7. 7. Pada tab event TForm, klik ganda sel di sebelah kanan OnCreatedan 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 penulisanposisi kiri dan atas beberapa komponen dan prosedur ButtonClickdengan sender BExpand menyebabkan komponen TGroupBoxGBExpand beserta komponen yang terpasang di dalamnyaditampilkan ketika form pertama kali dibangkitkan. Jikamenginginkan keadaan tersebut terjadi setiap kali form dipanggil,deklarasikan dalam event OnShow form.Prosedur Event OnClick pada Komponen TSpeedButton (BExpanddan BFeatures)Menu-menu yang ada dalam form FOtherDemo terbagi dalamkelompok Expand dan Features. Kelompok pertama berisi menuyang dapat ditambahkan dalam setting program aplikasi SistemAkuisisi Data yang telah dibuat dan menu yang kedua berisi topikuntuk membuat aplikasi lain. Manfaatkan komponenTSpeedButton BExpand dan BFeatures untuk menampilkan menu-menu dalam komponen TGroupBox. Blok kedua komponenTSpeedButton tersebut, isi sel di sebelah kanan event OnClickdengan 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
  8. 8. end;Kelompok menu dalam komponen TGroupBox akan ditampilkanberdasarkan sender prosedur ButtonClick, termasuk posisi ataskomponen TSpeedButton BShow.Prosedur Event OnMouseMove pada Semua KomponenKomponen TLabel LNotes berfungsi untuk menginformasikanketerangan suatu komponen ketika mouse bergerak di ataskomponen tersebut melalui event OnMouseMove. Blok semuakomponen yang tertampung dalam form FOtherDemo, isi pada selsebelah kanan tab event OnMouseMove dengan nama prosedurNotes, 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 padaTChartSeries 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
  9. 9. 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 senderprosedur Notes, property Caption komponen LNotes akanmenampilkan keterangan untuk setiap komponen tersebut. Jikaberada di luar komponen-komponen tersebut, tidak ada teks yangditampilkan.3.2 Membuat Garis Cross-HairGaris Cross-Hair merupakan garis silang pada „kotak‰ grafikketika mouse berada di atas grafik tersebut dan posisinya akanberubah mengikuti perubahan posisi mouse. Garis Cross-Hairdapat dipakai untuk mengetahui nilai suatu titik dalam grafik.Buatlah sebuah form baru dengan nama FCrossHair dan simpannama unit dalam UCrossHair. Pada form tersebut, pasang sebuahkomponen TChart, komponen TLabel, komponen TPanel,komponen TCheckBox, dan sebuah komponen TspeedButton,kemudian ubah property-nya seperti tabel berikut ini. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Name FCrossHair Position poScreenCenter TLabel (tab Left 205 Standard). Name LValues Pasang pada komponen Top 36176
  10. 10. 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 135Biarkan property yang lain sesuai nilai default-nya. Untukmengedit property komponen TChart, klik ganda komponentersebut sehingga muncul kotak dialog seperti Gambar 1.1. Buat 177
  11. 11. sebuah TChartSeries bertipe Line dua dimensi (tanda centangpada parameter 3D dihilangkan) dengan nama Series1 dan ubahnilai beberapa property lain sesuai kebutuhan.Deklarasikan beberapa variabel pada bagian public unit dengantipe 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 CrossHairColorbertipe TColor digunakan untuk mengisi warna pena (propertyColor) yang akan dipakai saat melukis garis Cross-Hair padakomponen TChart. Property Style pena tersebut berasal dari nilaivariabel CrossHairStyle.Prosedur Event OnCreate pada TForm (FCrossHair)Kode program yang dideklarasikan dalam prosedur eventOnCreate hanya dijalankan sekali, yaitu saat form dibangun. Klikganda sel di sebelah kanan event OnCreate form sehingga munculsebuah 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 padaTChartSeries dengan rentang data sebanyak angka dalam tandakurung. Posisi horisontal mouse yang lama di-reset denganmemberi nilai -1 pada variabel OldX. Warna pertemuan keduagaris Cross-Hair ketika form FCrossHair pertama kali ditampilkanbernilai clAqua dan disimpan dalam variabel CrossHairColor. GarisCross-Hair ditampilkan solid (tidak terputus-putus) denganmemberi nilai psSolid pada property Style pena (menjadi nilai178
  12. 12. variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankanperintah event OnClick komponen TCheckBox CCross.Prosedur Event OnClick pada Komponen TCheckBox (CCross)Komponen TCheckBox CCross berfungsi untuk mengubah kursorketika mouse berada di daerah komponen TChart. Kursorditampilkan Cross (crCross) jika property Checked komponenTCheckBox CCross bernilai True (dicentang) dan jika sebaliknyakursor berbentuk Default (crDefault). Klik ganda sel di sebelahkanan event OnClick komponen TCheckBox tersebut, kemudiandeklarasikan 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 ketikamouse bergerak melewati TChartSeries yang terdapat didalamnya.Prosedur Event OnMouseMove pada Komponen TChart (Chart1)Prosedur event OnMouseMove berguna untuk menangani kejadianketika mouse digerakan di atas komponen TChart Chart1. Buatlahprosedur lokal DrawCross pada prosedur event OnMouseMoveyang berisi perintah-perintah untuk melukis garis Cross-Hairdengan 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
  13. 13. 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 untukmenggambar garis dalam kanvas (komponen TChart Chart1).Property Style TPen menentukan style pena, property Widthmenentukan ketebalan garis tersebut, dan property Mode TPenmenentukan bagaimana warna pena tersebut berinteraksi denganwarna kanvas. Tabel berikut ini menjelaskan arti nilai propertyStyle 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 lebih180
  14. 14. 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 pmXorKembali ke prosedur lokal DrawCross, metode Move To akanmengubah posisi mouse ke suatu koordinat. Pemanggilan metode 181
  15. 15. Move To sama dengan menentukan property PenPos TPen, sertadilakukan sebelum memanggil metode Line To. Metode Line Tomenggambar garis pada kanvas dari koordinat yang ditentukandalam metode Move To sampai koordinat baru (x, y) yangditentukan oleh mouse dan menetapkan posisi pena padakoordinat baru tersebut.Pada prosedur lokal DrawCross, kombinasi metode MoveTo danLineTo yang pertama untuk menggambar garis Cross-Hair vertikaldimulai dari koordinat (nilai variabel ax (posisi x Mouse), posisiatas kotak grafik (property ChartRect), tinggi dinding grafik akibatefek 3D (property Heigh3D)), sampai koordinat (nilai variabel ax,posisi bawah kotak grafik-tinggi dinding 3D). Pengurangankoordinat y dengan nilai property Height3D berguna untukmengantisifasi tampilan grafik 3D (tiga dimensi), yaitu jikaparameter CheckBox 3D pada subtab 3D (Gambar 1.10) diberitanda centang. Property Height3D bernilai 0 jika grafik ditampilkan2 dimensi sehingga garis Cross-Hair vertikal menempel padadinding grafik.Kombinasi yang kedua berguna untuk menggambar garis Cross-Hair horisontal dengan batas kiri garis pada koordinat (posisi kirikotak grafik (property ChartRect) ditambah lebar dinding grafikakibat efek 3D (property Width3D), nilai variabel ay (posisi yMouse)) dan batas kanan grafik pada koordinat (posisi kanankotak grafik+lebar dinding 3D), nilai variabel ay). PropertyWidth3D bernilai 0 jika grafik ditampilkan 2 dimensi. Nilai propertyHeight3D dan Width3D berdasarkan nilai SpinEdit 3D% padasubtab 3D.Pada prosedur event OnMouseMove di atas, jika posisi mousetidak sedang di-reset (tidak sama dengan -1) maka prosedur lokalDrawCross dipanggil untuk membuat garis Cross-Hair. Nilaivariabel ax dan ay berasal dari posisi (x, y) mouse sebelum posisitersebut berubah menjadi yang tersimpan sementara dalamvariabel OldX dan OldY. Posisi (x, y) mouse tersebut kemudian di-reset dengan memberi nilai -1 pada variabel OldX sehingga garisCross-Hair yang telah terbentuk akan dihapus sebelum membuatgaris Cross-Hair baru.182
  16. 16. Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada didalam 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 didalam kotak Rect. Jika posisi x mouse (dikurangi nilai propertyHeight3D komponen TChart) dan posisi y mouse (ditambah nilaiproperty Width3D komponen TChart) berada dalam kotak grafik(property ChartRect komponen TChart) maka garis Cross-Hairbaru 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 dalamvariabel OldX (posisi x) dan OldY (posisi y).Metode GetCursorValues berguna untuk mendapatkan nilai posisi(x, y) mouse pada TChartSeries yang ditentukan. Nilai-nilaitersebut disimpan sementara dalam variabel ValueX dan ValueY,kemudian ditampilkan dalam property Caption komponen TLabelLValue menggunakan metode LabelValue pada masing-masingsumbu grafik. Metode GetHorizAxis menghubungkan TChartSeriesSeries1 dengan sumbu horisontal grafik. Untukmenghubungkannya dengan sumbu vertikal grafik, gunakanmetode GetVertAxis.Jika mouse tidak berada dalam kotak grafik (fungsi PtInRectbernilai False) maka garis Cross-Hair tidak digambar dan tidakada teks yang ditampilkan dalam property Caption komponenTLabel LValue.Prosedur Event OnAfterDrawValue pada TChartSeries (Series1)Event OnAfterDrawValue terjadi setelah data diplot dalamTChartSeries, yaitu me-reset posisi (x, y) mouse. Perintah iniberguna ketika plot data dilakukan secara on-line. Caramembuatnya, aktifkan jendela Object TreeView, cari objectbernama Series1 (terletak pada komponen TChart), kemudianaktifkan jendela Object Inspector dan klik ganda sel di sebelahkanan event OnAfterDrawValue object tersebut.procedure TFCrossHair.Series1AfterDrawValues(Sender: TObject);begin 183
  17. 17. OldX:= -1;end;Prosedur Event OnClick pada Komponen TSpeedButton (BColor)Warna kursor Cross dapat diubah dengan mengubah nilai variabelCrossHairColor. Perubahan warna dapat dilakukan denganmemanggil kotak dialog Color dan dieksekusi dengan tombol OK.Oleh karena komponen TColorDialog tidak dipasang dalam form,deklarasikan function bernama EditColor pada bagian private unitdan ketikkan kode program untuk function tersebut untukmemanggil 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 untukmembangkitkan kotak dialog Color dan menginisialisasi warnayang terpilih berdasarkan nilai variabel AColor. Metode Executedigunakan untuk menampilkan kotak dialog Color. Jika kotakdialog Color tersebut dieksekusi, nilai variabel AColor akan samadengan warna yang dipilih dari daftar warna pada kotak dialogColor. Hasil dari function EditColor adalah variabel AColor.Komponen TSpeedButton BColor dipakai untuk menampilkankotak dialog Color kemudian mengeksekusinya. Klik ganda sel disebelah kanan event OnClick komponen tersebut.procedure TFCrossHair.BColorClick(Sender: TObject);begin CrossHairColor:= EditColor(Self, CrossHairColor);end;184
  18. 18. Warna yang terpilih ketika kotak dialog Color ditampilkan samadengan nilai variabel CrossHairColor saat itu dan pada saat kotakdialog Color dieksekusi, hasilnya (nilai variabel AColor) menjadinilai variabel CrossHairColor yang baru. Perubahan nilai variabeltersebut akan mengubah warna kursor Cross, sedangkan warnagaris Cross-Hair merupakan kombinasi warna (dua warna yangsama) yang pertemuannya menghasilkan warna kursor Cross.Untuk menampilkan form FcrossHair, buat sebuah prosedur eventOnClick pada komponen TSpeedButton BShow yang terpasangdalam form FOtherDemo. Klik ganda komponen TSpeedButtontersebut 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 komponenTGroupBox GBExpand telah ditampilkan dan komponenTRadioButton RCrossHair dipilih, kemudian pengguna menekankomponen TSpeedButton BShow.3.3 Zoom dan Scrolling Grafik dengan Tombol KeyboardPada aplikasi Sistem Akuisi Data, proses zoom grafikmenggunakan komponen TSpeedButton dan scrolling grafikdengan komponen TScrollBar. Kedua proses tersebut dapatdilakukan dengan keyboard, untuk itu buat sebuah form baru, berinama Fkeyboard, dan simpan unit dalam UKeyboard. Letakkansebuah komponen TChart, sebuah komponen TPanel, 2 (dua)buah komponen TCheckBox, dan 2 (dua) buah komponen TLabelpada form FKeyboard. Ubah property komponen-komponentersebut seperti tabel berikut ini. Untuk property yang mempunyainilai lebih dari satu, nilai masing-masing dipisahkan oleh tandatitik koma. Sesuaikan berdasarkan urutan property Name. 185
  19. 19. Nama Nama Object Nilai PropertyTForm AutoSize True BorderStyle bsToolWindow Caption Zoom-Scrolling with Keyboard Topic KeyPreview True Name FKeyboard Position poScreenCenterTPanel BevelOuter bvNone(tab Standard) Color clWhite Height 62 Left 0 Name Panel1 Top 384 Width 540TCheckBox Caption &Inverted Scrolling; Scrolling(tab Standard) &Limitedsebanyak 2 Left 15buah. Pasangdalam Panel1 Name CInverted; CLimit Top 15; 40Tlabel AutoSize True; False186
  20. 20. (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 TrueProperty yang lain biarkan sesuai dengan nilai default-nya. Padakomponen TChart, buat sebuah TChartSeries bertipe Line duadimensi dengan nama Series1 dan ubah nilai beberapa propertylain sesuai kebutuhan.Untuk menampilkan form FKeyboard, buka kembali prosedurevent OnClick BShowClick pada unit UOtherDemo (formFOtherDemo), kemudian tambahkan kode programnya sehinggaprosedur tersebut menjadi seperti berikut ini.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FKeyboard)Prosedur event OnCreate hanya berguna untuk menginisialisasiTChartSeries, yaitu nilai acak dengan rentang sebanyak 500 datayang diplot dalam TChartSeries melalui metode FillSampleValues.Klik ganda sel di sebelah kanan event OnCreate form, kemudianketikkan kode programnya. 187
  21. 21. procedure TFKeyboard.FormCreate(Sender: TObject);begin Series1.FillSampleValues(500);end;Prosedur Event OnShow pada TForm (FKeyboard)Proses zoom dan scrolling grafik dengan keyboard hanya dapatdilakukan jika komponen TChart yang dimaksud menjadi focusform sehingga setiap kali form ditampilkan, komponen TChartChart1 harus diset menjadi focus form seperti pada prosedur eventOnShow berikut ini.procedure TFKeyboard.FormShow(Sender: TObject);begin Chart1.SetFocus;end;Prosedur event OnShow tersebut dapat diganti (dihapus) denganmemberi nilai Chart1 pada property ActiveControl formFKeyboard. Akan tetapi jika aplikasi mempunyai komponenTChart yang dapat di-zoom dan scrolling lebih dari satu,pemberian nilai property ActiveControl tersebut tidak dapatdilakukan.Prosedur Event OnKeyDown pada TForm (FKeyboard)Event OnKeyDown akan terjadi jika property KeyPreview formbernilai True. Ketika pengguna menekan suatu atau kombinasitombol keyboard dan form tersebut diaktifkan, perintah-perintahdalam event ini akan dijalankan. Klik ganda sel di sebelah kananevent OnKeyDown form Fkeyboard, kemudian ketikkan kodeprogram 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
  22. 22. 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 menggeserrange skala sumbu horisontal atau skala sumbu vertikal (nilaiproperty Maximum dikurangi dengan property Minimum). Nilaiskala maksimum dan minimum sumbu horisontal grafik diperolehsetelah dihubungkan dengan metode GetHorizAxis dan denganmetode GetVertAxis untuk sumbu vertikal. Range skala sumbuhorisontal grafik disimpan dalam variabel XRange, sedangkanvariabel YRange untuk menyimpan range skala sumbu vertikalgrafik.Flag ssShift merupakan salah satu nilai kelas bertipe TShiftStateyang digunakan untuk menentukan keadaan tombol Alt, Ctrl, Shift,dan tombol mouse. Tabel berikut ini menjelaskan masing-masingarti nilai flag: Nilai Arti ssShift Tombol Shift ditekan ssAlt Tombol Alt ditekan ssCtrl Tombol Ctrl ditekan 189
  23. 23. ssLeft Tombol kiri mouse ditekan ssRight Tombol kanan mouse ditekan ssMiddle Tombol tengah mouse ditekan ssDouble Mouse diklik gandaPada prosedur event KeyDown di atas, jika tombol Shift ditekanbersama 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 prosedurExit adalah untuk mengeluarkannya dari prosedur yang sekarangsedang dijalankan.Jika tombol Shift tidak ditekan, kemudian pengguna menekansalah satu tombol panah atau Page Up atau Page Down makaproses scrolling grafik akan dilakukan dengan metode Scroll padamasing-masing sumbu grafik. Metode Scroll mempunyai syntax:procedure Scroll(Const Offset: Double; InsideLimits: Boolean);Metode ini akan mengeser nilai skala maksimum dan minimumsuatu sumbu grafik berdasarkan konstanta Offset. Jika inginmenggeser grafik secara tidak terbatas maka variabel InsideLimitsharus bernilai False. Nilai variabel InsideLimits tergantung padanilai 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 0untuk menghapus nilai sebelumnya. Jika penguna menekan salahsatu tombol panah maka grafik akan digeser searah tanda panahtersebut sebesar nilai range sumbu grafik dibagi dengan 100. Padasumbu horisontal, nilai range sumbu horisontal (variabel XRange)adalah 500 data (angka dalam tanda kurung metodeFillSampleValues) sehingga jika pengguna menekan tombol panahkiri maka grafik akan digeser ke kiri sebesar 5 titik. Jika penggunamenekan tombol Page Up (VK_PRIOR) atau Page Down(VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range190
  24. 24. sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbuvertikal tergantung pada data random yang di-plot dalamTChartSeries.Untuk me-reset zoom grafik, digunakan tombol SPACE(VK_SPACE) dengan memanggil metode UndoZoom. Arah prosesscrolling akan terbalik dengan arah tombol panah jika komponenTCheckBox CInverted dicentang, yaitu hanya dengan memberinilai minus pada variabel aX dan aY.Prosedur Event OnClick pada TCheckBox (CInverted dan CLimits)Pemberian/penghilangan tanda centang pada komponenTCheckBox akan membangkitkan event OnClick dan fokus formberada pada komponen tersebut. Proses scrolling dan zoom grafikdengan tombol keyboard hanya akan terjadi jika komponenTChart yang dimaksud menjadi focus form sehingga prosedurevent OnClick pada kedua komponen tersebut hanya bergunauntuk mengembalikan focus form pada komponen TChart denganmemanggil metode SetFocus. Klik ganda masing-masingkomponen TCheckBox sehingga pada jendela Code Editor akanmuncul dua buah prosedur bernama CInvertedClick danClimitsClick. Ketikkan kode program berikut untuk masing-masingprosedur.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 digunakanuntuk menampilkan sebuah pesan ketika komponen TCheckBoxClimits diberi tanda centang (property Checked bernilai True). 191
  25. 25. Pesan tersebut tidak akan muncul ketika penggunamenghilangkan tanda centang pada komponen TCheckBoxClimits.3.4 Mengubah Property BackImage Komponen TChart Secara Run-timeProperty BackImage komponen TChart berguna untuk memberilatar belakang grafik dengan gambar. Saat desain form, gambartersebut dicari dengan tombol Browse pada GroupBox BackImagesubtab Panel (lihat kembali Gambar 1.7). Buat sebuah formdengan nama FBackImage dan simpan unit dalam UBackImage.Kemudian tambahkan sebuah komponen TOpenDialog, sebuahkomponen TChart, sebuah komponen TPanel, sebuah komponenTGroupBox, 3 (tiga) buah komponen TRadioButton, dan 2 (dua)buah komponen TSpeedButton. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yangmempunyai nilai lebih dari satu, nilai masing-masing dipisahkanoleh tanda titik koma. Sesuaikan berdasarkan urutan propertyName. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Property BackImage Topic Name FBackImage Position poScreenCenter TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 54 Left 0 Name Panel1192
  26. 26. 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 80Biarkan Property yang lain sesuai nilai default-nya. KomponenTOpenDialog berfungsi untuk membuka folder tempat file gambar.Jika ingin menyaring file gambar dengan eketensi tertentu ketikakotak dialog Open ditampilkan, misalnya hanya file gambar 193
  27. 27. bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkanjendela Object Inspector dan klik ganda sel di sebelah kananproperty Filter sehingga muncul kotak dialog Filter Editor. Isikansel pertama sebelah kiri dengan File Bitmap dan sel di sebelahkanannya dengan *.bmp, kemudian tekan tombol OK.Untuk mengedit komponen TChart, klik ganda komponen tersebutsehingga muncul Gambar 1.1. Buat sebuah TChartSeries bertipeLine dua dimensi dengan nama Series1. Klik subtab Panel danberikan gambar background Chart1 dengan menekan tombolBrowse.... Pilih RadioButton Stretch pada GroupBox Style dantandai CheckBox Inside. Ubah nilai beberapa property lain sesuaikebutuhan.Buka kembali prosedur BShowClick pada unit UotherDemo,kemudian tambahkan kode program untuk menampilkan formFBackImage melalui tombol BShow pada form FOtherDemo.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FBackImage)Kode program pada event OnCreate form FBackImage hanyadigunakan untuk menambahkan data pada TChartSeries Series1sebanyak 100 data dengan memanggil metode FillSampleValues.Klik ganda sel di sebelah kanan event OnCreate, kemudianketikkan perintahnya.procedure TFBackImage.FormCreate(Sender: TObject);begin Series1.FillSampleValues(100);end;194
  28. 28. Prosedur Event OnClick pada Komponen TSpeedButton (BBrowsedan BClear)Komponen TSpeedButton BBrowse berfungsi untuk mencarigambar yang akan mengisi background komponen TChart Chart1,sedangkan komponen BClear berfungsi untuk menghapus gambarbackground tersebut. Klik ganda pada masing-masing komponenTSpeedButton tersebut sehingga pada jendela Code Editor munculdua 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 dihapusdengan memberi nilai nil pada property BackImage komponenTChart Chart1.Sebuah kotak dialog Open akan muncul ketika penggunamenekan komponen BBrowse, kemudian jika kotak dialog tersebutdieksekusi (tombol Open ditekan) maka dengan metodeLoadFromFile, background grafik akan diisi dengan file gambaryang telah dipilih. Property Enabled komponen TGroupBoxGBStyle dan komponen TCheckBox CInside diberi nilai Truesehingga dapat diakses kembali setelah pada prosedurBClearClick 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 danbentuk komponen TChart, artinya jika ukuran dan bentukkomponen TChart diubah maka gambar akan ikut berubah. 195
  29. 29. Seluruh gambar background akan ditampilkan seukurankomponen TChart meskipun ukuran gambar tersebut terlalu besar.Dalam mode Tile, jika gambar background terlalu besar makagambar tersebut tidak seluruhnya mengisi komponen TChart,tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambarkemudian terpotong sampai pada batas bawah dan kanan grafik.Pada mode Center, hanya posisi tengah gambar yang akanmemenuhi background grafik jika ukuran gambar tersebut terlalubesar. Blok ketiga komponen tersebut, isi sel di sebelah kananevent OnClick dengan nama prosedur RadioButtonClick, kemudiantekan 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 makagambar background grafik ada dalam mode Stretch, demikianseterusnya untuk komponen TRadioButton yang lain.Prosedur Event OnClick pada Komponen TCheckBox (CInside)Gambar background grafik dapat dibuat memenuhi seluruhdinding komponen TChart atau hanya dalam kotak grafiknya saja,bergantung pada nilai property BackImageInside-nya. Untukmengendalikan nilai property tersebut, gunakan nilai propertyChecked komponen TCheckBox CInside. Klik ganda komponenTCheckBox tersebut kemudian ketik kode programnya.procedure TFBackImage.CInsideClick(Sender: TObject);begin Chart1.BackImageInside:= CInside.Checked;end;Property BackImageInside komponen TChart akan bernilai Truejika komponen TCheckBox CInside diberi tanda centang.196
  30. 30. 3.5 Digital SeriesSeluruh sistem operasi dalam komputer sebenarnya menggunakankombinasi bilangan biner, yaitu 0 (nol) dan 1 (satu). Prosestersebut kemudian dinamakan proses digital. Buat sebuah formbaru bernama FDigital dan simpan unitnya dengan nama UDigital.Pada form tersebut, letakkan sebuah komponen TChart, sebuahkomponen TPanel, sebuah komponen TTimer, sebuah komponenTspeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubahproperty komponen-komponen tersebut seperti tabel berikut ini. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Caption Digital Series Topic Name FDigital Position poScreenCenter TPanel (tab BevelOuter bvNone 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
  31. 31. (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; 50Biarkan nilai property yang lain sesuai default-nya. Padakomponen Tchart, buat empat buah TChartSeries bertipe line tigadimensi, kemudian beri judul yang berbeda sebagai nama masing-masing TChartSeries, dengan menekan tombol Title... pada subtabSeries (Gambar 1.1). Klik tab Series, kemudian pilih subtabFormat seperti Gambar 2.3. Pada GroupBox Line Mode, beri tandacentang pada CheckBox Stairs untuk mengubah TChartSeriesdalam bentuk seperti „tangga‰ (umumnya grafik digital). Ubahproperty komponen TChart yang lain sesuai kebutuhan.Untuk memanggil form FDigital, tambahkan beberapa kode padaprosedur event OnClick komponen TSpeedButton BShow(BShowClick). Prosedur tersebut sekarang menjadi seperti berikut:procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin198
  32. 32. if RDigital.Checked then FDigital.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FDigital)Prosedur event OnCreate form hanya berisi inisialisasi beberapaproperty. Klik ganda sel di sebelah kanan event OnCreate form,kemudian ketikkan kode program berikut pada prosedur yangmuncul.procedure TFDigital.FormCreate(Sender: TObject);begin Chart1.ApplyZOrder:= COrder.Checked; Chart1.Legend.Inverted:= True;end;Property ApplyZOrder digunakan untuk mengontrol ketikabeberapa TChartSeries pada komponen TChart yang sama harusditampilkan independen dalam ruang Z yang berbeda. Propertytersebut valid jika grafik ditampilkan 3D dan mempunyai lebih darisatu TChartSeries. Pemberian nilai True pada property Invertedsubtab Legend untuk membalikkan urutan legend grafik dariTChartSeries berindeks terbesar.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Untuk simulasi operasi, data sinyal digital berupa data acakdengan range 2 data (0 dan 1) diplot pada keempat TChartSeriesdengan menggunakan komponen TTimer Timer1. Klik gandakomponen tersebut sehingga pada jendela Code Editor munculsebuah 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
  33. 33. Variabel GainData berguna untuk menaikkan TChartSeries padasuatu posisi sehingga keempat TChartSeries tersebut tidak salingtumpang tindih. Plot data pada masing-masing TChartSeriesmenggunakan metode Add dengan syntax:function Add(Const AValue:Double; Const ALabel:String; AColor:TColor):Longint; virtual;Metode Add digunakan untuk menambahkan data padaTChartSeries jika nilai sumbu horisontal grafik (x) secara otomatisditentukan ketika nilai sumbu vertikal (y) akan diplot. VaribelALabel dan AColor merupakan parameter pilihan seperti padametode AddXY. Nilai Y grafik untuk TChartSeries kedua bergesersecara vertikal sebanyak 2 (dua) kalinya, sedangkan yang ketigabergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak6 (enam) kalinya.Kode program selanjutnya adalah untuk menggeser grafik ke kirisetiap kali ada data yang diplot dalam TChartSeries. Nilai skalamaksimum sumbu bawah grafik mengambil nilai terakhir yangtelah diplot dalam TChartSeries. Range sumbu horisontal grafikyang ingin ditampilkan setiap kali ada plot data adalah 100 data.Kode program ini dapat ditulis dalam event OnAfterAdd padakeempat TChartSeries seperti pada pembuatan aplikasi SistemAkuisisi Data.Prosedur Event OnClick pada Komponen TSpeedButton (BRun)Pada saat desain form, property Enabled komponen TTimerTimer1 bernilai False sehingga untuk mengendalikannyadimanfaatkanlah komponen TSpeedButton BRun. Klik ganda sel disebelah kanan event OnClick komponen tersebut, kemudian ketikkode 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; endend;200
  34. 34. Selain untuk mengaktifkan komponen TTimer Timer1, komponenTSpeedButton BRun juga digunakan untuk menonaktifkannberdasarkan nilai property Caption komponen TSpeedButtontersebut.Prosedur Event OnClick pada Komponen TCheckBox(CLastValues, CView, dan COrder)Ketiga komponen TCheckBox tersebut berfungsi untuk mengubahbeberapa property komponen TChart, yaitu property LegendStylepada subtab Legend, property 3D pada subtab 3D, dan propertyApplyZOrder. Klik ganda masing-masing komponen TCheckBox,sehingga muncul tiga buah prosedur. Lengkapi ketiga prosedurtersebut sehingga menjadi seperti berikut iniprocedure 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 manayang akan ditampilkan dalam legend grafik. Jika diberi nilai LastValues maka akan ditampilkan nilai terakhir dari semuaTChartSeries yang aktif. Jika diberi nilai Automatic maka secaraotomatis nilai property Title TChartSeries akan ditampilkan dalamlegend grafik. Metode Repaint menyebabkan Chart induk di-repaint(digambar ulang). 201
  35. 35. Prosedur Event OnGetLegendTex pada Komponen TChart(Chart1)Event OnGetLegendText digunakan untuk mengganti penulisanteks pada legend grafik. Klik ganda sel di sebelah kanan eventOnGetLegendText komponen TChart Chart1, kemudian ketikkankodenya.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 CLastValuesdiberi tanda centang (atau property LegendStyle komponenTChart bernilai lsLastValues).3.6 Mengukur Kecepatan Plot Data pada TChartSeries Bertipe Fast LinePlot data pada TChartSeries bertipe Fast Line lebih cepatdibandingkan dengan tipe Line. Untuk mnegukur kecepatannya,buat sebuah form baru dan simpan dalam unit UFastLine.Selanjutnya, pasang sebuah komponen TChart, sebuah komponenTPanel, sebuah komponen TSpeedButton, dan 3 (tiga) buahkomponen TCheckBox. Ubah property komponen-komponentersebut seperti tabel berikut ini. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Fast Line Series Topic Name FFastLine Position poScreenCenter202
  36. 36. TPanel (tab BevelOuter bvNone 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 15Biarkan nilai property yang lain sesuai default-nya. Klik gandakomponen TChart untuk mengedit property-nya. Klik tab Chartdan pilih subtab Series, lalu buat dua buah TChartSeries bertipeFast Line dua dimensi dengan menekan tombol Add....Selanjutnya, pilih subtab General, hilangkan tanda centang padaCheckBox Clip Points. Pada subtab Axis, hilangkan tanda centangpada CheckBox Show Axis sehingga sumbu grafik tidak 203
  37. 37. ditampilkan. Property yang lain dapat diubah sesuai kebutuhanAnda.Form FFastLine ditampilkan melalui form FOtherDemo denganmenekan komponen TSpeedButton BShow di mana komponenTGroupBox GBFeatures telah ditampilkan dan komponenTRadioButton RFastLine dipilih. Buka kembali prosedurBShowClick pada unit UOtherDemo untuk menambahkanbeberapa kode seperti berikut ini.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FFastLine)Inisialiasasibeberapa variabel, plot data random dalamTChartSeries dilakukan ketika form dibangun melalui prosedurevent 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 mencegah204
  38. 38. TeeChart menghapus latar belakang panel ketika ada perubahanukuran grafik. Property BufferedDisplay secara default bernilaiTrue untuk mencegah kelap-kelip ketika grafik yang mempunyaibanyak titik diplot kembali sehingga kedipan tersebut hanya terjadipada daerah kotak grafik. Variabel global TeeDefaultCapacitymerupakan kapasitas default untuk object Tlist. Komponen TChartselalu menggunakan variabel ini untuk menginisialisasi kapasitasTList. Secara default, ia bernilai 0 dan jika diset lebih besar lagidapat meningkatkan kecepatan ketika memplot data padaTChartSeries.Data yang akan diplot pada masing-masing TChartSeries adalahsebanyak 1000 data. Agar data random yang diplot tersebutterlihat menyempit ke tengah dan melebar ke kedua sisinya, buatsuatu fungsi pada variabel DataRandom. Penambahan variabelDataRandom dengan nilai DataX dalam fungsi Add padaTChartSeries Series1 menyebabkan TChartSeries tersebut diplotdiagonal dalam kotak grafik. TChartSeries Series2 diplot terbalikdari Series2 sehingga pada posisi tengah (titik 500) keduanyasaling berpotongan.Prosedur Event OnClick pada Komponen TSpeedButton (BSpeed)Untuk mengukur kecepatan plot data pada TChartSeries,dilakukan proses pembesaran dan pengecilan grafik. Klik gandasel di sebelah kanan event OnClick komponen TSpeedButtonBSpeed sehingga muncul suatu prosedur pada jendela CodeEditor.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
  39. 39. 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 Time1dengan memanggil metode GetTickCount, kemudian prosespembesaran grafik dilakukan sebanyak 30 kali yang disusuldengan proses pengecilan grafik sebanyak 30 kali. Waktu setelahproses zoom tersebut disimpan dalam variabel Time2. Selanjutnyagrafik dikembalikan pada keadaan awal dengan memanggilUndoZoom. Jadi, proses plot ulang data dilakukan sebanyak 61kali, yaitu 60 kali untuk proses zoom dan sekali proses UndoZoom.Oleh karena masing-masing TChartSeries mempunyai 1.000 datamaka data yang diplot pada keduanya adalah 2.000 data. Waktuseluruh proses (dalam milidetik) kemudian ditampilkan pada suatupesan yang segera muncul ketika proses tersebut berakhir. Selamaproses plot data berlangsung, kursor berbentuk Hour-Glass danjika telah selesai bentuknya kembali pada Default.Prosedur Event OnClick pada Komponen TCheckBox (CBuffered,CDraw, dan CClip)Kecepatan plot data dalam TChartSeries juga bergantung padanilai property BufferedDisplay, ada/tidaknya skala sumbu grafik(property AxisVisible), dan nilai property ClipPoints komponenTChart. Gunakan ketiga komponen TCheckBox yang terpasangdalam form untuk mengendalikan nilai property komponen TCharttersebut. Klik ganda masing-masing komponen TCheckBoxsehingga 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
  40. 40. Kecepatan plot data semakin lambat jika komponen-komponenTCheckBox tersebut dicentang.3.7 Menghubungkan Komponen TDBChart dengan Komponen TTableSuatu aplikasi grafik berbasis database sebenarnya lebih mudahdibuat dengan komponen TDBChart. Data yang diplot padaTChartSeries dapat diset melalui property DataSource-nya.Dataset dapat berupa komponen TQuery maupun komponenTTable. Pada bagian ini TChartSeries komponen TDBChart akandihubungkan dengan komponen TTable. Buat sebuah form dengannama FLingked dan simpan unit-nya dengan nama ULingked.Pada form tersebut, letakkan sebuah komponen TDBChart, sebuahkomponen TPanel, sebuah komponen TDBNavigator, 2 (dua) buahkomponen TTable, 2 (dua) buah komponen TDataSource, dan 2(dua) buah komponen TDBGrid. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yangmempunyai nilai lebih dari satu, masing-masing nilainyadipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutanproperty Name. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Caption Linked Table Topic Name FLinked Position poScreenCenter TPanel BevelOuter bvNone (tab Standard) Color clWhite Height 305 Left 0 Name Panel1 207
  41. 41. Top 0 Width 540Ttable (tab BDE) Active Truesebanyak 2 buah DatabaseName D:ProgramDatabase IndexName (dikosongkan); CusNo MasterFields (dikosongkan); CusNo MasterSource (dikosongkan); DataSource1 Name Table1; Table2 TableName customer.db; orders.dbTdataSource (tab DataSet Table1; Table2Data Access) Name DataSource1;sebanyak 2 buah DataSource2TDBNavigator (tab DataSource DataSource1Data Controls). Flat TruePasang dalamPanel1 Height 25 Left 8 Top 8 VisibleButton hanya nbFirst; nbPrior; nbNext; nbLast yang bernilai TrueTDBGrid Ctl3D False;(tab Data Controls) DataSource DataSource1;sebanyak 2 buah DataSource2pasang dalam Height 120Panel1 Left 8 Name DBGrid1; DBGrid2 Options.dgEditing False; True208
  42. 42. Options.dgIndicator False Options.dgRowLine False Options.dgRowSelect True; False Top 41; 172 Width 521Biarkan property yang lain sesuai dengan nilai default-nya. Padakomponen TDBChart, buat sebuah TChartSeries bertipe Bar tigadimensi. Klik tab Series, kemudian pilih subtab Format sepertiterlihat pada Gambar 3.1.Gambar 3.1 Kotak dialog Editing Chart untuk subtab Format bertipe BarParameter-parameter yang terdapat dalam subtab Format adalah:1. ComboBox Style: menentukan bentuk bar yang digunakan untuk menggambar TChartSeries. 209
  43. 43. 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 datasetyang akan digunakan TChartSeries. Pilih Data Set, kemudian pilihTabel2 pada ComboBox Dataset. ComboBox Labels digunakanuntuk mengeset nilai x grafik. Pilih field SaleDate dari daftar fields210
  44. 44. komponen Table2 dan pilih field AmountPaid sebagai nilai y grafikpada ComboBox Bar sehingga sekarang subtab Data Sourcemenjadi seperti Gambar 3.2. Gambar 3.2 Kotak dialog Editing Chart untuk subtab Data SourceForm FLinked ditampilkan dengan menekan komponenTSpeedButton BShow yang terpasang pada form FOtherDemo dimana komponen TGroupBox GBFeatures telah ditampilkan dankomponen TRadioButton RLingked dipilih. Buka kembali prosedurBShowClick pada unit UotherDemo, kemudian tambahkan kodeprogram untuk menampilkan form FLingked.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then 211
  45. 45. FLinked.ShowModal; end;end;Pastikan bahwa di folder D:ProgramDatabase telah ada filedatabase bernama customer.db, order.db, dan items.db. Filedatabase tersebut disertakan dalam CD.Prosedur Event OnDataChange pada Komponen TDataSource(DataSource1)Event ini terjadi ketika ada perubahan data pada dataset karenaproses scrolling data atau edit data. Klik ganda sel di sebelahkanan event OnDataChange pada komponen TDataSourceDataSource1.procedure TFLinked.DataSource1DataChange(Sender: TObject; Field: TField);begin DBChart1.CheckDataSource(Series1);end;Metode CheckDataSource akan me-refresh semua data padaTchartSeries, baik dari database Query, Table, atau sumber dataTChartSeries lain. Metode ini dapat dipanggil secara rutin jika kitaingin menambahkan atau memodifikasi data yang ditampilkansecara realtime pada TChartSeries. Jadi, data yang diplot padaTChartSeries Series1 akan berubah ketika ada perubahan datapada dataset Tabel2.3.8 Membuat Grafik Mini yang Resizeable dan Garis DividerUkuran komponen TChart dapat diubah sesuai perubahan ukuranform induknya. Garis divider merupakan garis pembatas antaratitik baru dan titik lama yang diplot dalam TChartSeries. Buatsebuah form baru dengan nama FMini dan simpan dalam unitUMini. 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 yangmempunyai nilai lebih dari satu, nilai masing-masing dipisahkan212
  46. 46. oleh tanda titik koma. Sesuaikan berdasarkan urutan propertyName. Nama Object Nama Property Nilai TForm BorderStyle bsSizeToolWin Caption Mini Small Chart Topic Height 148 Name FMini Position poScreenCenter Width 202 TTimer (tab Enabled False 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 Panel2Untuk mengedit komponen TChart, klik ganda komponen tersebutkemudian buat sebuah TChartSeries bertipe Bar 2 Dimensi dengannama BarSeries1 pada Chart1, dua buah TChartSeries bertipe Line3 Dimensi dengan nama LineSeries1, dan LineSeries2 padaChart2. Kedua komponen TChart tersebut terpasang pada Panel1.Pada Chart3, buat sebuah TChartSeries bertipe Pie 3 Dimensi 213
  47. 47. dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuahTChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dansebuah TChartSeries bertipe Area 2 Dimensi dengan namaAreaSeries1.Klik subtab Axis dan hilangkan tanda centang pada CheckBoxShow Axis untuk semua komponen TChart. Property yang laindapat diubah sesuai kebutuhan.Sebelum membuat prosedur dalam unit ini, buka kembali unitUotherDemo, kemudian tambahkan beberapa kode pada prosedurBShowClick untuk menampilkan form FMini melalui formFOtherDemo.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then FMini.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FMini)Nilai beberapa variabel dan plot data pada TChartSeries dilakukandalam prosedur event OnCreate. Deklarasikan variabelValueXChart2 dan ValueXChart4 bertipe Longint pada bagianPublic unit. Variabel pertama digunakan untuk menggambar garisdivider vertikal pada komponen TChart Chart2 dan variabel yangkedua pada Chart4. Banyaknya data yang akan diplot padabeberapa TChartSeries berdasarkan konstanta NumData. Beri nilai30 pada konstanta tersebut dan ketikkan tepat di bawah kompilerseperti berikut ini.implementation{$R *.dfm}214
  48. 48. Const NumData = 30;Kemudian klik ganda sel di sebelah kanan event OnCreate formFMini 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); LineSeries2.FillSampleValues(NumData); AreaSeries1.FillSampleValues(NumData); LineSeries3.FillSampleValues(NumData);end;Posisi awal garis divider vertikal pada komponen TChart Chart2berada di luar kotak grafik, sedangkan pada Chart4 berada tepat ditengah karena banyaknya data yang diplot pada TChartSeriesAreaSeries1 dan LineSeries3 berdasarkan nilai konstantaNumData (30 data). Metode FillSampleValues akan memplot nilaiacak pada suatu TChartSeries dengan rentang data sebanyakangka dalam tanda kurung.Prosedur Event OnResize pada TForm (FMini)Kode program yang dideklarasikan pada event OnResize akansegera dijalankan ketika ukuran form diubah. Klik ganda sel disebelah 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 sehinggajika form di-resize maka property Height akan mengikutiperubahan ukuran form. Property Width-nya ditentukan sebagaisetengah dari perubahan nilai property ClientWidth form. Ukurankomponen TPanel Panel2 secara otomatis akan mengikutiperubahan ukuran form dan komponen Panel1 karena propertyAlign-nya bernilai alClient, begitu juga dengan ukuran komponenTChart Chart2 yang akan mengikuti perubahan ukuran Panel1 dankomponen Chart1. Ukuran Chart4 juga akan mengikuti perubahan 215
  49. 49. ukuran Panel2 dan komponen Chart3 karena property Align keduakomponen 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 hanyaakan mengubah lebar (property Width) kedua komponen TCharttersebut sementara tingginya (property Height) tetap. Untukmenyesuaikan ukurannya, property Height komponen TChartChart1 ditentukan sebagai setengah dari nilai property ClientHeightkomponen TPanel Panel1 dan property Height komponen Chart3juga ditentukan sebagai setengah dari nilai property ClientHeightkomponen Panel2.Prosedur Event OnClose dan OnShow pada TForm (FMini)Event OnClose terjadi ketika form FMini ditutup, sedangkan eventOnShow akan dijalankan setiap kali form ditampilkan. Klik gandasel di sebelah kanan masing-masing event sehingga pada jendelaCode 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 bernilaiFalse, komponen TTimer tersebut akan diaktifkan setiap kali formditampilkan dan dinonaktifkan kembali jika form ditutup.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Animasi plot data pada TChartSeries dilakukan dalam eventOnTimer komponen TTimer Timer1. Klik ganda komponen TTimertersebut, kemudian buat sebuah prosedur lokal RefreshChart padaprosedur yang muncul.procedure TFMini.Timer1Timer(Sender: TObject); procedure RefreshChart(AOwner: TChart;216
  50. 50. 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 suatuTChartSeries setiap detik berdasarkan posisi nilai x-nya (variabelValueXChart). Setiap detik nilai variabel ValueXChart akanbertambah 1 (satu) melalui prosedur Inc. Nilai variabel tersebutdikembalikan pada nilai 0 (nol) jika telah sama dengan banyaknyadata (konstanta NumData). Jika posisi x grafik kembali ke awal(bernilai 0) maka dengan metode SetMinMax, nilai skala minimumdan maksimum sumbu kiri grafik diisi dengan nilai minimum danmaksimum sumbu kiri grafik tersebut. Nilai y yang terakhirdisimpan dalam variabel LastValue. Jika posisi x grafik tidak 0(nol) maka nilai variabel LastValue sama dengan nilai y pada 217
  51. 51. posisi x saat itu. Nilai variabel LastValue tersebut ditambah dengansuatu nilai acak menjadi nilai y grafik pada posisi x yang sekarang.Seluruh TChartSeries yang terdapat pada komponen TChartChart2 dan Chart4 akan diplot dengan prosedur lokal tersebut, dimana nilai x untuk TChartSeries pada Chart2 berasal dari nilaivariabel ValueXChart2 sedangkan pada Chart4 berasal dari nilaivariabel ValueXChart4. Dengan kata lain, variabel ValueXChartpada prosedur lokal RefreshChart diganti dengan ValueXChart2atau ValueXChart4, bergantung pada nilai variabel AOwner-nya.TChartSeries bertipe Pie yang terdapat dalam Chart1 akan terusberputar dengan sudut putar sama dengan nilai sisa pembagiansudut putar saat itu (setelah ditambah 1 derajat) terhadap 359derajat. Nilai y yang diplot pada TChartSeries bertipe bar danberasal dari nilai y saat itu dikalikan dengan 80% nilai acak antara0 sampai 39.Prosedur Event OnAfterDrawValue pada TChartSeries KomponenTChart (LineSeries2 dan LineSeries3)Setelah data diplot pada TChartSeries LineSeries2 danLineSeries3, sebuah garis divider vertikal segera digambar padakomponen TChart di mana kedua TChartSeries tersebut berada(Chart2 dan Chart4). Klik ganda sel di sebelah kanan eventOnAfterDrawValue pada masing-masing TChartSeries tersebut.procedure TFMini.LineSeries2AfterDrawValues(Sender: TObject);begin if ValueXChart2 >= 0 then with Chart2, Canvas do begin 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
  52. 52. end;Garis divider vertikal berwarna merah digambar pada TChartSeriesLineSeries2 dan berwarna biru pada TChartSeries LineSeries3dengan metode DoVertLine. Metode DoVertLine ditulis dengansyntax:procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;Metode ini akan menggambar garis vertikal dari Y0 sampai Y1pada posisi horisontal X. Variabel Y0 merupakan posisi atas kotakgrafik ditambah 1 pixel; variabel Y1 diisi dari nilai posisi bawahkotak grafik setelah dikurangi 1 pixel; dan posisi horisontal Xdiperoleh menggunakan metode CalXPos berdasarkan nilai xmasing-masing TChartSeries.3.9 Membuat Halaman GrafikTChartSeries yang telah diplot dapat dibagi dalam beberapahalaman bergantung jumlah total data dan jumlah data perhalaman. Halaman-halaman tersebut kemudian dapat ditelusuridengan metode-metode scroll grafik. Buat sebuah form barudengan nama FPaging dan simpan dalam unit UPaging. Pada formtersebut, letakkan sebuah komponen TChart, sebuah komponenTPanel, sebuah komponen TSpinEdit, sebuah komponenTCheckBox, 2 (dua) buah komponen TLabel, dan 4 (empat) buahkomponen TSpeedButton. Ubah property komponen-komponentersebut seperti tabel berikut ini. Untuk property yang mempunyainilai lebih dari satu, masing-masing nilai dipisahkan oleh tandatitik koma. Sesuaikan berdasarkan urutan property Name. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Caption Linked Table Topic Name FLinked Position poScreenCenter 219
  53. 53. TPanel (tab BevelOuter bvNoneStandard) Color clWhite Height 90 Left 0 Name Panel1 Top 407 Width 540TSpinEdit (tab Left 235Samples). MaxValue 100000Pasang padaPanel1 MinValue 0 Name SEPaging Top 8TCheckBox Caption Scale Last Page(tab Standard). Left 290Pasang dalamPanel1 Name CScale Top 10Tlabel (tab Caption Points Per Page :; (bebas)Standard)sebanyak 2 Left 131; 181buah. Pasang Name Label1; LCurrentdalam Panel1 Top 11; 38 Transparent TrueTSpeedButton Caption &First; &Previous; &Next; &Last(tab Additional)sebanyak 4 Flat Truebuah. Pasang Glyph Klik ganda sel di sebelah kanandalam Panel1 property ini, load gambar BFirst.bmp; BPrevious.bmp; BNext.bmp; BLast.bmp220
  54. 54. Height 22 Left 69; 165; 261; 357 Name BFirst; BPrevious; BNext; BLast Top 58 Width 88Biarkan nilai property yang lain sesuai default-nya. Untukkomponen TChart, klik ganda komponen tersebut kemudian pilihsubtab Series pada tab Chart. Tekan tombol Add... untukmenambahkan sebuah TChartSeries bertipe Line 2 Dimensi danberi nama Series1. Ubah property yang lain sesuai dengankebutuhan.Form FPaging akan ditampilkan melalui form FOtherDemo ketikapengguna menekan komponen TSpeedButton BShow di manakomponen TGroupBox GBFeatures telah ditampilkan dankomponen TRadioButton RPaging dipilih. Klik ganda komponenTSpeedButton tersebut dan tambahkan kode untuk menampilkanform FPaging pada prosedur BShowClick.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then FMini.ShowModal; if RPaging.Checked then FPaging.ShowModal; end;end; 221
  55. 55. Prosedur Event OnCreate pada TForm (FPaging)Event OnCreate form hanya akan dijalankan sekali saat formdibangun. Klik ganda sel di sebelah kanan event tersebut,kemudian ketikkan kode programnya.procedure TFPaging.FormCreate(Sender: TObject);begin Series1.FillSampleValues(100); SEPaging.Value:= 18; Chart1PageChange(Chart1);end;Data sebanyak 100 diplot dalam TChartSeries dengan metodeFillSampleValues. Property Value komponen TSpinEdit SEPagingdiinisialisasi dengan nilai 18. Nilai property tersebut menunjukkanbanyaknya data per halaman sebagai pengganti SpinEdit Pointsper Page pada subtab Paging (property MaxPointsPerPage) yangnilainya dapat diubah secara run-time. ProsedurChart1PageChange merupakan prosedur event OnPageChangepada komponen TChart Chart1.Prosedur Event OnPageChange pada Komponen TChart (Chart1)Event OnPageChange terjadi ketika property Page komponenTChart telah diubah dan sebelum halaman grafik tersebut berubah.Property MaxPointsPerPage (SpinEdit Points per Page pada subtabPaging) harus lebih besar dari 0 (nol) untuk mengaktifkanmekanisme pemberian nomor halaman secara otomatis. Klikganda 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 keadaandiperbesar/diperkecil, jadi coba panggil metode UndoZoom.222
  56. 56. Informasi suatu halaman terhadap total halaman grafikditampilkan melalui property Caption komponen TLabel. PropertyPage komponen TChart mengeset halaman grafik saat ini,sedangkan property NumPages menunjukkan total halaman grafik.Untuk grafik yang mempunyai halaman lebih dari satu, komponenTSpeedButton BFirst dapat diakses tergantung aktif/tidaknyakomponen BPrevious. Komponen BPrevious akan aktif jikahalaman grafik yang sekarang ditampilkan bukan halamanpertama. Dan komponen BNext akan aktif jika halaman grafikyang sekarang ditampilkan bukan halaman terakhirnya, sedangaktif/tidaknya komponen BLast tergantung pada aktif/tidaknyakomponen BNext. Jika grafik hanya terdiri atas satu halamanmaka keempat komponen TSpeedButton tersebut tidak aktif.Prosedur Event OnChange pada Komponen TSpinEdit (SEPaging) Komponen TSpinEdit SEPaging merupakan penggantiSpinEdit Points per Page pada subtab Paging, perubahan nilainyaakan mempengaruhi banyaknya data per halaman (nilai propertyMaxPointsPerPage komponen TChart). Klik ganda sel di sebelahkanan event OnChange komponen TSpinEdit tersebut kemudianketikkan kode programnya pada prosedur SEPagingChange yangmuncul.procedure TFPaging.SEPagingChange(Sender: TObject);begin Chart1.MaxPointsPerPage:= SEPaging.Value; Chart1PageChange(Chart1);end;Halaman grafik mungkin akan berubah setiap kali ada perubahannilai property Value komponen TSpinEdit SEPaging sehinggaprosedur Chart1PageChange perlu dipanggil kembali untukmenyesuaikan keadaan beberapa komponen. 223
  57. 57. Prosedur Event OnClick pada Komponen TCheckBox (CScale)Jika saat mengedit komponen TChart Anda tidak menandaiCheckBox Scale Last Page pada subtab Paging maka halamanterakhir akan ditampilkan dengan range sumbu horisontal grafiksama dengan halaman yang lain. Jika sebaliknya maka skalahalaman terakhir grafik akan diatur berdasarkan banyaknya titikyang tampak pada halaman terakhir tersebut. KomponenTCheckBox CScale berfungsi untuk mengontrol propertyScaleLastPage komponen TChart Chart1. Klik ganda komponenTCheckBox 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, manfaatkankeempat komponen TSpeedButton tersebut. Blok keempatkomponen tersebut dan isi sel di sebelah kanan event OnClickdengan 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 halamanpertama grafik akan ditampikan. Jika BPrevious ditekan makametode PreviousPage akan membawa ke halaman sebelumnya,sedangkan untuk menampilkan halaman selanjutnya, panggilmetode NextPage, yaitu ketika pengguna menekan komponenBNext. Halaman yang terakhir akan ditampilkan ketika penggunamenekan komponen BLast.224
  58. 58. 3.10 Menampilkan Nilai Statistik dalam TChartSeries Bertipe LineNilai statistik data dapat dibuat dengan mengeset property DataSource suatu TChartSeries dengan suatu fungsi statistik sepertiAverage, High, dan Low. Buat sebuah form baru lagi, beri namaFstatisticBar, dan simpan dalam unit UStatisticBar. Kemudian,tambahkan sebuah komponen TChart, sebuah komponen TPanel,sebuah komponen TTimer, 3 (tiga) buah komponenTSpeedButton, dan 3 (tiga) komponen TCheckBox. Ubah propertykomponen-komponen tersebut seperti tabel berikut ini. Untukproperty yang mempunyai nilai lebih dari satu, masing-masingnilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkanurutan property Name. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Statistic Bar Series Topic Name FStatisticBar Position poScreenCenter TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 72 Left 0 Name Panel1 Top 407 Width 540 TTimer (tab Enabled False System) Interval 100 225
  59. 59. 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; 50Biarkan nilai property yang lain sesuai default-nya. Untukkomponen TChart, tambahkan sebuah TChartSeries bertipe Bar 3Dimensi, lalu beri nama Series1. Tambahkan juga 3 (tiga) buahTChartSeries bertipe Line 3 dimensi dengan nama BiggestSeries,AverageSeries, dan SmallestSeries. Ubah judul keempatTChartSeries tersebut dengan menekan tombol Title pada subtabSeries (Series, Biggest, Average, dan Smallest). Tampilkan legendgrafik dengan memberi tanda centang pada CheckBox Visiblepada subtab Legend. Sesuaikan property yang lain dengankebutuhan.Untuk menampilkan form FstatisticBar, tambahkan perintah padaprosedur BShowClick. Buka kembali unit UOtherDemo dan klikganda komponen TSpeedButton BShow sehingga kursor jendela226
  60. 60. Code Editor akan berada pada prosedur tersebut. Sekarangprosedur BShowClick menjadi seperti berikut ini.procedure TFOtherDemo.BShowClick(Sender: TObject);begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then 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 formpertama kali dibangun. Klik ganda sel di sebelah kanan eventOnCreate, 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 TBarSeriesdalam bagian public unit. Variabel ini dipakai untuk membuatsebuah TChartSeries bertipe Bar secara run-time sehingga padaevent OnCreate diberi nilai nil. Tampilan grafik dalam 3Dbergantung pada nilai property Checked komponen TCheckBoxCview. Property Chart3DPercent ditentukan bernilai 35%. Datasebanyak 6 (enam) titik diplot pada TChartSeries Series1 denganmetode FillSampleValues. Property Dark3D Series1 (CheckBox 227
  61. 61. Dark Bar 3D Sides pada subtab Format) nilainya ditentukanberdasarkan mode warna grafik yang dipakai dan bernilai True jikadipakai mode lebih dari 256 warna dengan metodeIsScreenHighColor.Prosedur Event OnAfterDraw pada Komponen TChart (Chart1)Event OnAfterDraw hanya akan dipanggil setelah komponenTChart tersebut telah menggambar semua TChartSeries yangterdapat di dalamnya. Event ini berisi kode untuk menampilkanteks pada masing-masing TChartSeries statistik yangmenginformasikan nilai statistik data. Klik ganda sel di sebelahevent OnAfterDraw komponen TChart tersebut, kemudian ketikkankode programnya.procedure TFStatisticBar.Chart1AfterDraw(Sender: TObject);begin if not CTwoBar.Checked then with Chart1, Canvas do begin 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; TextOut(ChartXCenter, BiggestSeries.CalcYPos(0), BiggestSeries.Title+ + BiggestSeries.ValueMarkText[0]); Font.Color:= SmallestSeries.SeriesColor; TextOut(ChartXCenter, SmallestSeries.CalcYPos(0), SmallestSeries.Title+ + SmallestSeries.ValueMarkText[0]); end;end;Event ini diberlakukan jika komponen TCheckBox CTwoBar tidakdicentang. Pola TBrush ditentukan bernilai bsClear untukmembersihkan pola sebelumnya. Property PixelsPerInch digunakanuntuk memastikan bahwa font yang disalin dari kanvas ke printermempunyai ukuran yang sama. Faktor konversi antara pixel dan228

×