Grafik yang dibuat dengan komponen delphi TChart memiliki beberapa feature yang menarik untuk dikembangkan, salah satunya menampilkan garis cross dan nilainya sesuai dengan posisi mouse pada area grafik tersebut. Dan pembuatan garis silang cross-hair pada area grafik akan memudahkan visualisasi posisi mouse tersebut terhadap masing-masing sumbu grafik.
Buka kembali aplikasi TChart yang dulu pernah kamu download, kemudian ganti komponen TSpeedButton menjadi TPDJButton dan tambahkan sebuah popup menu untuk komponen TPDJButton tersebut. Atau download lagi TChart Source Code ver.1.1, ekstrak dan buka dengan program delphi.
Secara default, desktop program delphi hanya menampilkan jendela Menu Utama, Object TreeView, Object Inspector, Form Designer dan Source Code. Tambahkan jendela Project Manager, dengan meng-klik menu View -> Project Manager, kemudian drag jendela Object TreeView, Object Inspector dalam jendela Project Manager sehingga seperti gambar di bawah ini, dan klik kanan mouse pada salah satu tab, pilih Left pada popup menu yang muncul.
Biasanya saya menambahkan jendela To-Do List (dari menu View juga, fungsi jendela ini untuk mencatat daftar yang akan dilakukan) dan mengatur tampilan desktop program delphi seperti gambar di bawah ini… simpan setting desktop program delphi ini dengan mengklik tombol save current desktop
Selanjutnya download Cross-Hair Source Code, kemudian ekstrak dan tambahkan pada aplikasi TChart dengan meng-klik kanan mouse pada project TChart.exe kemudian cari file .pas yang ingin ditambahkan (lihat gambar di bawah ini)
Klik ganda popup menu yang ada dalam form fmMainTChart, kemudian klik menu Cross-Hair
Tambahkan code di bawah ini untuk menampilkan aplikasi cross-hair melalui aplikasi TChart.
procedure TfmMainTChart.miCrossHairClick(Sender: TObject); begin fmCrossHair.ShowModal end;
Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart ‘ references form ‘fmCrossHair’ declarated in unit ‘uCrossHair’ which is not in your USES list. Do you wish to add it? tekan tombol Yes.
Sedikit penjelasan code pada unit uCrossHair, perhatikan bagian public unit
public dValueX, dValueY: Double; iOldValueX, iOldValueY: Integer; clCrossHairColor: TColor; psCrossHairStyle: TPenStyle; procedure DrawCross(ax, ay: Integer);
Variabel dValueX, dValueY untuk menyimpan posisi horisontal dan vertikal saat mouse berada pada suatu titik dalam area grafik. Dan agar nantinya nilai posisi tersebut tidak hilang setelah mouse digeser, disimpan dalam variabel iOldValueX dan iOldValueY.
Nilai variabel clCrossHairColor, bertipe TColor, untuk mengisi warna yang akan dipakai saat membuat garis cross-hair pada grafik. Sedang Style garis cross-hair berasal dari nilai dalam variabel psCrossHairStyle.
1. Membuat garis cross-hair dengan prosedur DrawCross
Prosedur DrawCross untuk membuat garis cross-hair pada grafik dengan komponen TChart sebagai kanvas-nya
procedure TfmCrossHair.DrawCross(ax, ay: Integer); begin with ctCrossHair, Canvas do begin Pen.Color:= clCrossHairColor; Pen.Style:= psCrossHairStyle; Pen.Mode:= pmXor; Pen.Width:= 1; MoveTo(ax, ChartRect.Top-Height3D); LineTo(ax, ChartRect.Bottom-Height3D); MoveTo(ChartRect.Left+Width3D, ay); LineTo(ChartRect.Right+Width3D, ay); end; end;
Warna garis cross-hair nantinya sesuai dengan nilai variabel clCrossHairColor, begitu juga dengan style dari garis cross-hair sesuai dengan nilai variabel psCrossHairStyle. Nilai kedua variabel ini ditentukan dalam prosedur event OnShow dari form fmCrossHair. Sedang warna garis pertemuan cross-hair (antara garis horisontal dan vertikal) sesuai dengan mode yang dipilih, penjelasan mengenai property style dan mode komponen TPen download TPen Property Description. Width menentukan ketebalan garis tersebut.
Metode Move To akan mengubah posisi mouse ke suatu koordinat. Sedang metode Line To menggambar garis pada kanvas dari koordinat yang ditentukan dalam metode Move To sampai koordinat baru ditentukan.
Kombinasi metode MoveTo dan LineTo yang pertama untuk menggambar garis cross-hair vertikal, sedang kombinasi yang kedua untuk menggambar garis cross-hair horisontal. Pengurangan koordinat y dengan nilai property Height3D pada kombinasi pertama dan penambahan koordinat x dengan property Width3D pada kombinasi kedua untuk mengantisifasi tampilan grafik 3D (tiga dimensi, jika checkbox 3 Dimensions pada tab Chart -> tab 3D diberi tanda ‘centang’), agar garis cross-hair tetap terlihat menempel pada dinding grafik. Nilai property Height3D dan Width3D sesuai dengan nilai pada 3D%, untuk melihatnya klik ganda pada komponen TChart dan aktifkan tab 3D seperti gambar di bawah ini
2. Menginisialisasi aplikasi dengan prosedur event OnShow pada form fmCrossHair
Prosedur ini untuk menentukan nilai-nilai awal dari aplikasi (klik ganda sel di sebelah kanan event OnShow pada form fmCrossHair)
procedure TfmCrossHair.FormShow(Sender: TObject); begin Series1.FillSampleValues(30); iOldValueX:= -1; clCrossHairColor:= clAqua; psCrossHairStyle:= psSolid; chCrossClick(Sender); end;
Metode FillSampleValues akan mem-plot nilai random pada grafik dengan rentang data sebanyak angka dalam tanda kurung. Posisi horisontal mouse yang lama di-reset dengan memberi nilai -1 pada variabel iOldValueX. Dan warna pertemuan kedua garis cross-hair bernilai clAqua, disimpan dalam variabel clCrossHairColor. Garis cross-hair ditampilkan solid (tidak terputus-putus) dengan memberi nilai psSolid pada variabel psCrossHairStyle. Dan code yang terakhir memangil prosedur chCrossClick, isinya menentukan apakah kursor mouse dalam bentuk cross atau default (tanda panah penunjuk).
3. Mengubah kursor mouse sesuai tanda ‘centang’ pada checkbox Cross Cursor
Kursor mouse dapat diubah menjadi cross atau default dengan memberi atau menghilangkan tanda ‘centang’ pada checkbox Cross Cursor (klik ganda pada komponen TCheckBox chCross).
procedure TfmCrossHair.chCrossClick(Sender: TObject);
begin
if chCross.Checked then
ctCrossHair.Cursor:= crCross
else
ctCrossHair.Cursor:= crDefault;
ctCrossHair.OriginalCursor:= ctCrossHair.Cursor;
end;
Property OriginalCursor dipanggil untuk memastikan kursor mouse sesuai dengan tanda ‘centang’ pada checkbox Cross Cursor ketika mouse bergerak melewati grafik tersebut.
4. Mendapatkan nilai posisi garis cross pada area grafik
Pada saat mouse bergerak melewati grafik, garis cross harus dibuat dan nilainya dicatat dalam suatu variabel (klik ganda sel di sebelah kanan event OnMouseMove pada komponen TChart ctCrossHair)
procedure TfmCrossHair.ctCrossHairMouseMove(Sender: TObject; Shift: TShiftState;
X, Y: Integer);
begin
//membuat garis cross pada posisi mouse lama
if (iOldValueX <> -1) then
begin
DrawCross(iOldValueX, iOldValueY);
iOldValueX:= -1;
end;
//mengecek posisi mouse dalam area grafik
lCrossValue.Caption:= EmptyStr;
if PtInRect(ctCrossHair.ChartRect, Point(X-ctCrossHair.Width3D,
Y+ctCrossHair.Height3D)) then
begin
DrawCross(x, y);
iOldValueX:= x;
iOldValueY:= y;
with Series1 do
begin
GetCursorValues(dValueX, dValueY);
lCrossValue.Caption:= 'Nilai X/Y : '+GetHorizAxis.LabelValue(dValueX)+
'/'+GetVertAxis.LabelValue(dValueY);
end;
end;
end;
Jika posisi mouse tidak berada di luar area grafik (tidak sama dengan -1) maka garis cross-hair dibuat sesuai dengan posisi saat itu (posisi lama), kemudian langsung reset posisi-nya dengan memberi nilai -1 pada variabel iOldValueX. Sehingga garis cross-hair yang telah terbentuk akan langsung terhapus ketika sebuah garis cross-hair yang baru akan dibuat.
Selanjutnya mengecek posisi mouse pada area grafik dengan fungsi PtInRect, syntax-nya adalah
function PtInRect(const Rect: TRect; const P: TPoint): Boolean
Fungsi ini akan bernilai True jika koordinat P berada di area Rect. Jika posisi mouse ada dalam area grafik maka garis cross-hair akan dibuat dengan prosedur DrawCross dan nilainya disimpan dalam variabel iOldValueX dan iOldValueY.
Metode GetCursorValues untuk mendapatkan nilai posisi mouse, nilai-nilai tersebut kemudian disimpan dalam variabel dValueX dan dValueY. Dan ditampilkan dalam komponen TLabel lCrossValue, dengan menggunakan metode GetHorizAxis.LabelValue untuk sumbu horisontal dan GetVertAxis.LabelValue untuk sumbu vertikal grafik.
5. Mereset posisi mouse setelah mem-plot data
Jika data yang di-plot ke grafik bersifat kontinyu maka posisi mouse setelah mem-plot data perlu di-reset dengan memberi nilai -1 pada variabel iOldValueX. Caranya membuatnya, aktifkan jendela Object TreeView, cari object bernama Series1 (terletak di dalam komponen TChart ctCrossHair) kemudian aktifkan jendela Object Inspector dan klik ganda sel di sebelah kanan event OnAfterDrawValue dari object tersebut.
procedure TfmCrossHair.Series1AfterDrawValues(Sender: TObject); begin iOldValueX:= -1; end;
Nuwun..
Daftar download untuk artikel ini:
1. TChart Source Code ver.1.1 - 4.33 kB
2. Cross-Hair Source Code - 2.08 kB
3. TPen Property Description - 20.52 kB
4. TChart Application ver.1.1 - 296 kB
