Dalam aplikasi database yang dibangun dengan Borland Delphi 6, untuk mengakses database MySQL kamu bisa menggunakan semua komponen database seperti ADO, BDE maupun dbExpress. Koneksi database MySQL dengan komponen BDE tidak jauh berbeda dengan komponen ADO atau dbExpress. Sebagai contoh download Connect MySQL Source Code, ekstrak dalam komputer kamu dan buka dengan Delphi. Source code untuk aplikasi ini memakai database linked, buat dulu database tersebut sekalian driver ODBC-nya, caranya baca kembali artikel Membuat Driver ODBC untuk Database MySQL

Koneksi dengan komponen ADO

Biasanya koneksi database dengan ADO melalui driver ODBC, komponen yang digunakan tidak sebanyak jika dengan komponen dbExpress, perhatikan gambar di bawah ini

Komponen TADOConnection berfungsi untuk koneksi dengan sumber data, bisa langsung dari file databasenya (misalnya database Ms Access) atau melalui driver ODBC. Pastikan driver ODBC untuk database MySQL telah dibuat, dan untuk mengubah koneksinya klik ganda komponen bernama adocConnMySQL sehingga muncul kotak dialog seperti di bawah ini, klik tombol Build.. kemudian lakukan langkah-langkahnya

Untuk menguji koneksi bisa dilakukan atau tidak tekan tombol Test Connection, jika berhasil akan muncul pesan “Test connection succeeded“.

Pada source code, perintah koneksi dengan komponen ADO dieksekusi ketika pengguna meng-klik menu koneksi -> ODBC-ADO, dan dikodekan dalam prosedur miODBCClick seperti di bawah ini

procedure TfmConnMySQL.miODBCClick(Sender: TObject);
begin
  if sqlcConnMySQL.Connected = True then
    sqlcConnMySQL.Close;

  dsCustomer.DataSet:= tbCustomer;
  dsOrders.DataSet:= tbOrders;
  Series1.DataSource:= tbOrders;

  adocConnMySQL.Open;
  if adocConnMySQL.Connected = True then
  begin
    tbCustomer.Open;
    tbOrders.Open;
    fmConnMySQL.Caption:= 'Koneksi Database MySQL dengan ODBC-ADO';
  end;
end;

Karena aplikasi ini bisa koneksi database dengan menggunakan dua komponen, yaitu komponen ADO dan dbExpress, salah satu komponen harus di-disconnect. Komponen sqlcConnMySQL, fungsinya sebagai media koneksi dengan komponen dbExpress, jika dalam kondisi connect maka di’tutup’ dulu. Untuk menampilkan data hasil koneksi dengan ADO, pastikan property DataSet dari komponen TDBGrid, dsCustomer dan dsOrders, diisi dengan komponen TADOTable yang bersesuaian. Setelah itu baru koneksi dengan komponen adocConnMySQL dilakukan berikut komponen TADOTable-nya.

Koneksi dengan komponen dbExpress

Klik ganda komponen sqlcConnMySQL, di layar monitor akan muncul kotak dialog seperti gambar di bawah.. kemudian coba klik tombol Test Connection, disimbolkan dengan tanda ‘conteng’

Jika muncul pesan seperti di atas, artinya Borland Delphi kamu belum bisa koneksi langsung dengan database MySQL. Cari file dbexpmys.dll, biasanya di C:\Program Files\Borland\Delphi6\Bin, kemudian copy file tersebut ke C:\Windows\system. Tekan tombol Continue jika muncul pesan “You’ll need to provide administrator permission to copy to this folder“. Setelah itu buka file dbxdrivers.ini, di folder C:\Program Files\Common Files\Borland Shared\DBExpress, dengan notepad. Bagian di bawah [MYSQL] harus seperti berikut, biasanya sih sama..

[MYSQL]
GetDriverFunc=getSQLDriverMYSQL
LibraryName=dbexpmys.dll
VendorLib=LIBMYSQL.dll
BlobSize=-1
Database=DBNAME
ErrorResourceFile=
HostName=ServerName
LocaleCode=0000
Password=password
User_Name=user

Perhatikan pada kode VendorLib=LIBMYSQL.dll, artinya di system kamu harus ada file dll tersebut, file ini sudah saya sertakan pada source code yang tadi kamu download. Copy file libmySQL.dll ke folder C:\Windows\system, jika muncul pesan “You’ll need to provide administrator permission to copy to this folder” tekan tombol Continue.

Sekarang klik ganda lagi komponen sqlcConnMySQL, dan tekan tombol Test Connection. Pesan “Succesfully Connected” seharusnya muncul di layar monitor kamu. Mulai sekarang Borland Delphi kamu sudah bisa koneksi langsung dengan database MySQL, dan bisa membuat aplikasi lain dengan komponen dbExpress tanpa melakukan langkah-langkah di atas.

Seperti koneksi dengan komponen ADO, untuk koneksi dengan komponen dbExpress juga menggunakan menu. Source code-nya pun tidak jauh berbeda

procedure TfmConnMySQL.midbExpressClick(Sender: TObject);
begin
  if adocConnMySQL.Connected = True then
    adocConnMySQL.Close;

  dsCustomer.DataSet:= cdsCustomer;
  dsOrders.DataSet:= cdsConnDetail;
  Series1.DataSource:= cdsConnDetail;

  sqlcConnMySQL.Open;
  cdsCustomer.Active:= sqlcConnMySQL.Connected;
  fmConnMySQL.Caption:= 'Koneksi Database MySQL dengan dbExpress';
end;

Menampilkan data dari database MySQL dalam grafik

Tema ini sebenarnya sudah dibahas dalam artikel Menampilkan Database dalam Grafik, kamu bisa baca kembali artikel ini. Bedanya, kali ini diletakkan dalam tab tersendiri, tab grafik, dan karena ada dua jenis koneksi maka nilai property DataSource dari komponen Series1 ditentukan dalam prosedur miODBCClick dan midbExpressClick.

Sedikit tambahan biasanya setiap saya membuat aplikasi yang melibatkan komponen untuk akses data, misal TADOTable atau TClientDataset, saya selalu memastikan komponen-komponen ini dalam keadaan tidak aktif ketika aplikasi ini di’tutup’. Sehingga memory komputer terbebaskan dan tidak dipenuhi oleh operasi yang sudah tidak diperlukan lagi. Perintah ini dikodekan dalam events OnClose pada form fmConnMySQL

procedure TfmConnMySQL.FormClose(Sender: TObject;
 var Action: TCloseAction);
begin
  adocConnMySQL.Close;
  tbCustomer.Close;
  tbOrders.Close;
  sqlcConnMySQL.Close;
  cdsCustomer.Close;
  cdsConnDetail.Close;
end;

Nuwun..

Daftar download untuk artikel ini:
1. Connect MySQL Source Code - 73.87 kB

Buka kembali project TChart dari artikel terdahulu atau jika tidak punya download TChart Source Code ver.1.9 dan segera ekstrak di komputer kamu.. sebelum membukanya, buat dulu driver ODBC untuk database linked (baca artikel Menampilkan Database dalam Grafik, di bagian awal artikel ini ada tulisan tentang cara membuat driver ODBC). Sesudah itu download About Source Code, ekstrak di komputer kamu dan tambahkan dengan meng-klik kanan mouse pada project TChart.exe, pilih menu Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Untuk memanggilnya melalui form fmMainTChart (unit uMainTChart), klik ganda pada sel di sebelah kanan event OnClick komponen label1.. dan tambahkan kode program seperti ini

procedure TfmMainTChart.Label1Click(Sender: TObject);
begin
  Chart4.BevelOuter:= bvRaised;
  fmAbout.ShowModal;
end;

Jalankan aplikasi dengan menekan tombol Run… jika muncul pesan Form ‘fmMainTChart‘ references form ‘fmAbout’ declarated in unit ‘uAbout’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run..

Ketika form about ini ditampilkan, teks informasi akan bergerak naik per baris sampai baris terakhir setelah itu baris pertama akan dimunculkan lagi demikian seterusnya. Efek ini hanya menggunakan komponen memo Memo1 dan komponen timer Timer1. Tuliskan isi teks about pada property Lines komponen Memo1, kemudian klik ganda komponen Timer1..

procedure TfmAbout.Timer1Timer(Sender: TObject);
begin
  Memo1.Top := Memo1.Top-1;
  if Memo1.Top = -Memo1.Height then
    Memo1.Top := Panel1.Height;
end;

Selama komponen Timer1 dijalankan (aktif) maka posisi atas komponen Memo1 (property Top) secara terus menerus digeser vertikal sebanyak 1 pixel. Dan pada saat posisi atasnya mencapai batas maksimal komponen Memo1 (property Height) maka posisi atasnya akan dikembalikan ke keadaan semula (sama dengan nilai property Height komponen Panel1), demikian seterusnya. Jika teks yang bergerak terlalu lambat/cepat, kamu bisa mengubah nilai property Interval komponen Timer1.

Komponen Timer1 ini akan aktif ketika form about ditampilkan dan tidak aktif ketika form about ditutup. Klik ganda sel di sebelah kanan event OnShow dan OnClose dari form fmAbout..

procedure TfmAbout.FormShow(Sender: TObject);
begin
  Memo1.Top := Panel1.Height;
  Timer1.Enabled := True;
end;

procedure TfmAbout.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  Timer1.Enabled := False;
end;

Posisi awal komponen Memo1 pada saat form about ditampilkan sama dengan nilai property Height komponen Panel1.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.9 - 185.88 kB
2. About Source Code - 12.66 kB
3. TChart Application ver.1.9 - 838.75 kB

Buka kembali project TChart dari artikel terdahulu atau jika tidak punya download TChart Source Code ver.1.8 dan segera ekstrak di komputer kamu.. sebelum membukanya, buat dulu driver ODBC untuk database linked (baca artikel Menampilkan Database dalam Grafik, di bagian awal artikel ini ada tulisan tentang cara membuat driver ODBC). Sesudah itu download Digital Source Code, ekstrak di komputer kamu dan tambahkan dengan meng-klik kanan mouse pada project TChart.exe, pilih menu Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Aktifkan form fmMainTChart (unit uMainTChart), kemudian klik ganda komponen popmenu pmOtherDemo.. klik ganda menu Digital Chart.. dan tambahkan kode program seperti ini

procedure TfmMainTChart.miDigitalChartClick(Sender: TObject);
begin
  fmDigital.ShowModal;
end;

Jalankan aplikasi dengan menekan tombol Run… jika muncul pesan Form ‘fmMainTChart‘ references form ‘fmDigital’ declarated in unit ‘uDigital’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run.. Jika tidak ada lagi pesan yang muncul, aplikasi telah berjalan dengan baik.

1. Inisialisasi aplikasi

Umumnya grafik untuk sinyal digital ditampilkan dalam bentuk ‘tangga’, klik ganda komponen TChart, aktifkan tab Series, kemudian pilih series (misalnya Channel 1) dan aktifkan tab Format.. Perhatikan gambar di bawah, checkbox Stairs diberi tanda ‘centang’ untuk memberi efek ‘tangga’ pada series grafik yang dipilih. Property Stairs untuk keempat series diberi tanda ‘centang’..

Pada bagian public unit uDigital, dideklarasikan variabel bRunTimer dengan tipe data Boolean, variabel ini menentukan jalan tidaknya proses simulasi data grafik. Inisialisasi beberapa property komponen TChart dan variabel bRunTimer, ditentukan dalam event OnCreate dari form fmDigital. Aktifkan form fmDigital kemudian klik ganda sel di sebelah kanan event OnCreate..

procedure TfmDigital.FormCreate(Sender: TObject);
begin
  bRunTimer:= False;
  Chart1.ApplyZOrder:= chOrder.Checked;
  Chart1.Legend.Inverted:= True;
end;

Property ApplyZOrder digunakan untuk mengontrol ketika beberapa series pada komponen TChart yang sama harus ditampilkan terpisah dalam sumbu Z yang berbeda, sehingga keempat series tidak terlihat ‘menumpuk’ tetapi ada jarak untuk masing-masing series. Property ini berlaku jika grafik ditampilkan 3D dan mempunyai lebih dari satu series. Pemberian nilai True pada property Inverted dari subtab Legend untuk membalikkan urutan legend grafik, dimulai dari series berindeks terbesar ke yang terkecil.

2. Tampilan grafik

Legend grafik ditampilkan sesuai dengan prosedur Chart1GetLegendText, klik ganda sel di sebelah kanan event OnGetLegendText dari komponen TChart..

procedure TfmDigital.Chart1GetLegendText(Sender: TCustomAxisPanel;
 LegendStyle: TLegendStyle; Index: Integer; var LegendText: String);
begin
  if LegendStyle = lsLastValues then
    LegendText:= LegendText+' --> '+Chart1.Series[Index].Title;
end;

Teks legend grafik akan diganti jika property LegendStyle komponen TChart bernilai lsLastValues (atau checkbox chLastValues diberi tanda ‘centang’). Klik ganda checkbox chLastValues..

procedure TfmDigital.chLastValuesClick(Sender: TObject);
begin
  if chLastValues.Checked then
    Chart1.Legend.LegendStyle:= lsLastValues
  else
    Chart1.Legend.LegendStyle:= lsAuto;
end;

Property LegendStyle untuk menentukan materi mana yang akan ditampilkan dalam legend grafik. Jika diberi nilai Automatic (atau lsAuto) maka secara otomatis ‘judul’ series akan menjadi legend grafik. Dan jika diberi nilai Last Values (atau lsLastValues) maka legend grafik sesuai dengan prosedur Chart1GetLegendText di atas.

Dua prosedur untuk kedua komponen checkbox yang lain, checkbox chView untuk menampilkan grafik dalam wujud 3 Dimensi sedang checkbox chOrder untuk mengontrol ada tidaknya sumbu Z grafik. Klik ganda pada masing-masing komponen tersebut..

procedure TfmDigital.chViewClick(Sender: TObject);
begin
  Chart1.View3D:= chView.Checked;
end;

procedure TfmDigital.chOrderClick(Sender: TObject);
begin
  Chart1.ApplyZOrder:= chOrder.Checked;
  Chart1.Repaint;
end;

3. Simulasi data

Untuk simulasi aplikasi, data sinyal digital berupa data random dengan range 2 data (0 dan 1) di-plot pada keempat series dengan menggunakan komponen timer Timer1. Klik ganda komponen tersebut..

procedure TfmDigital.Timer1Timer(Sender: TObject);
var
  iGainData: Longint;
begin
  for iGainData:= 0 to Chart1.SeriesCount-1 do
  with Chart1.Series[iGainData] do
    Add(2*iGainData+Random(2), '', clTeeColor);

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

Variabel iGainData untuk menaikkan series pada posisi tertentu sehingga keempat series tersebut tidak saling tumpang tindih. Plot data pada masing-masing series menggunakan metode Add dengan syntax :

function Add(Const AValue:Double; Const ALabel:String;
             AColor:TColor):Longint; virtual;

Metode Add digunakan untuk menambahkan data pada series jika nilai sumbu horisontal grafik (x) secara otomatis ditentukan ketika nilai sumbu vertikal (y) akan di-plot. Varibel ALabel dan AColor merupakan parameter pilihan seperti pada metode AddXY.

Nilai Y grafik untuk series kedua bergeser secara vertikal sebanyak 2 (dua) kalinya. Sedang yang ketiga bergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak 6 (enam) kalinya.

Kode program selanjutnya untuk menggeser grafik ke kiri setiap ada data yang di-plot dalam series. Nilai skala maksimum sumbu bawah grafik mengambil nilai terakhir yang telah di-plot dalam series. Dan range sumbu horisontal grafik yang ingin ditampilkan adalah 100 data. Kode untuk menentukan sumbu horisontal ini dapat ditulis dalam event OnAfterAdd pada keempat series.

Untuk mengendalikan bekerja/tidaknya timer simulasi data, digunakan komponen button btRun. Klik ganda komponen ini..

procedure TfmDigital.btRunClick(Sender: TObject);
begin
  bRunTimer:= not bRunTimer;
  Timer1.Enabled:= bRunTimer;
  if bRunTimer then
    btRun.Caption:= 'Stop'
  else
    btRun.Caption:= '&Run';
end;

Proses akan bekerja ketika variabel bRunTimer bernilai True, jika sebaliknya timer akan terhenti.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.8 - 183.54 kB
2. Digital Source Code - 2.3 kB
3. TChart Application ver.1.8 - 825.36 kB

Masih dalam project TChart, buka kembali atau jika tidak punya download TChart Source Code ver.1.7 dan segera ekstrak di komputer kamu.. sebelumnya buat dulu driver ODBC database linked (baca artikel Menampilkan Database dalam Grafik, terutama tentang cara membuat driver ODBC). Sesudah itu download Mini Chart Source Code, ekstrak di komputer kamu dan tambahkan pada project TChart.. Caranya klik kanan mouse pada project TChart.exe, pilih menu Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Aktifkan form fmMainTChart (unit uMainTChart), kemudian klik ganda komponen popmenu pmOtherDemo.. klik ganda menu Mini Small Charts.. dan tambahkan kode program seperti ini

procedure TfmMainTChart.miMiniSmallChartsClick(Sender: TObject);
begin
  fmMini.ShowModal;
end;

Jalankan aplikasi dengan menekan tombol Run… jika muncul pesan Form ‘fmMainTChart‘ references form ‘fmMini’ declarated in unit ‘uMini’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run..

1. Inisialisasi aplikasi

Pada bagian Public unit dideklarasikan variabel iValueXChart2 dan iValueXChart4 bertipe Longint. Variabel pertama digunakan untuk menggambar garis divider vertikal pada komponen Chart2 dan variabel yang kedua pada Chart4. Dan Banyaknya data yang akan di-plot pada beberapa series berdasarkan nilai dari konstanta NumData, yaitu 30.

Seperti umumnya aplikasi, beberapa nilai awal ditentukan pada saat kontsruktor Create dipanggil. Klik ganda event OnCreate dari form fmMini..

procedure TfmMini.FormCreate(Sender: TObject);
begin
  iValueXChart2:= -1;
  iValueXChart4:= NumData div 2;

  BarSeries1.FillSampleValues(6);
  PieSeries1.FillSampleValues(8);
  LineSeries1.FillSampleValues(NumData);
  AreaSeries1.FillSampleValues(NumData);
  LineSeries2.FillSampleValues(NumData);
  LineSeries3.FillSampleValues(NumData);
end;

Posisi awal garis divider vertikal pada komponen Chart2 berada di luar kotak grafik. Sedang pada Chart4 berada tepat di tengah karena banyaknya data yang di-plot pada series AreaSeries1 dan LineSeries3 berdasarkan nilai konstanta NumData (30 data). Metode FillSampleValues akan mem-plot nilai random pada suatu series dengan rentang data sebanyak angka dalam tanda kurung.

Ketika aplikasi ini diperbesar/diperkecil, grafik yang terpasang di dalamnya perlu disesuaikan dengan perubahan yang terjadi. Klik ganda event OnResize dari form fmMini..

procedure TfmMini.FormResize(Sender: TObject);
begin
  Panel1.Width:= ClientWidth div 2;
  Chart1.Height:= ClientHeight div 2;
  Chart3.Height:= ClientHeight div 2;
end;

Property Align komponen Panel1 bernilai alLeft, sehingga jika form di-resize maka property Height akan mengikuti perubahan ukuran form. Sedang property Width-nya ditentukan setengah dari perubahan nilai property ClientWidth form. Ukuran komponen Panel2 secara otomatis akan mengikuti perubahan ukuran form dan komponen Panel1 karena property Align-nya bernilai alClient.

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

2. Membuat garis Divider

Setelah data di-plot pada series LineSeries2 dan LineSeries3, sebuah garis divider vertikal segera digambar pada komponen TChart dimana kedua series tersebut berada (Chart2 dan Chart4). Klik ganda sel di sebelah kanan event OnAfterDrawValue pada masing-masing series tersebut..

procedure TfmMini.LineSeries2AfterDrawValues(Sender: TObject);
begin
  if iValueXChart2 >= 0 then
  begin
    with Chart2, Canvas do
    begin
      Pen.Color:= clRed;
      DoVertLine(Series[0].CalcXPos(iValueXChart2),
                 ChartRect.Top+1,
                 ChartRect.Bottom-1);
    end;
  end;
end;

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

Garis divider vertikal berwarna merah digambar pada series LineSeries2 dan berwarna biru pada series LineSeries3 dengan menggunakan metode DoVertLine, dengan syntax :

procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;

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

3. Simulasi data grafik

Untuk simulasi data yang di-plot pada series digunakan komponen timer Timer1, klik ganda komponen timer tersebut..

procedure TfmMini.Timer1Timer(Sender: TObject);

  Procedure RefreshChart(AOwner: TChart; var iValueXChart: Longint);
  var
    a: Longint;
    dLastValue: Double;
  begin
    Inc(iValueXChart);
    if iValueXChart >= NumData then
      iValueXChart:= 0;

    for a:= 0 to AOwner.SeriesCount-1 do
    begin
      if iValueXChart = 0 then
      begin
        with AOwner do
        begin
          LeftAxis.Automatic:= True;
          LeftAxis.SetMinMax(MinYValue(LeftAxis), MaxYValue(LeftAxis));
        end;
        dLastValue:= AOwner.Series[a].YValues.Last;
      end
      else
        dLastValue:= AOwner.Series[a].YValue[iValueXChart-1];

      AOwner.Series[a].YValue[iValueXChart]:= dLastValue+Random(ChartSamplesMax)-
                                              (ChartSamplesMax div 2);
    end;
  end;

var
  iDataBar: Longint;
begin
  RefreshChart(Chart2, iValueXChart2);
  RefreshChart(Chart4, iValueXChart4);

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

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

Prosedur lokal RefreshChart untuk mengubah nilai suatu series setiap detik berdasarkan posisi nilai x-nya (variabel iValueXChart). Setiap detik nilai variabel iValueXChart akan bertambah 1 (satu) dengan prosedur Inc. Nilai variabel tersebut di-reset (bernilai 0) jika telah sama dengan banyaknya data (konstanta NumData). Jika posisi x grafik kembali ke awal (bernilai 0) maka dengan mengunakan metode SetMinMax, nilai skala minimum dan maksimum sumbu kiri grafik diisi dengan nilai minimum dan maksimum sumbu kiri grafik tersebut. Dan nilai y yang terakhir, disimpan dalam variabel dLastValue. Jika posisi x grafik tidak 0 (nol) maka nilai variabel dLastValue sama dengan nilai y pada posisi x saat itu. Nilai variabel dLastValue tersebut ditambah dengan suatu nilai random menjadi nilai y grafik pada posisi x yang sekarang.

Seluruh series yang terdapat pada komponen Chart2 dan Chart4 akan di-plot dengan mengunakan prosedur lokal RefreshChart, dimana nilai x untuk series pada Chart2 berasal dari nilai variabel iValueXChart2 sedang pada Chart4 dari nilai variabel iValueXChart4. Dengan kata lain variabel iValueXChart pada prosedur lokal RefreshChart diganti dengan iValueXChart2 atau iValueXChart4 tergantung nilai variabel AOwner-nya.

Untuk series bertipe Pie yang terdapat dalam Chart1 akan terus berputar dengan sudut putar sama dengan nilai sisa pembagian sudut putar saat itu (setelah ditambah 1 derajat) dengan 359 derajat. Sedang nilai y yang di-plot pada series bertipe Bar berasal dari nilai y saat itu dikalikan dengan 80 % nilai random antar 0 sampai 39.

4. Mengaktifkan/me-non aktif-kan proses simulasi data grafik

Proses simulasi data grafik dengan komponen timer akan aktif ketika aplikasi ini dipanggil, dikodekan melalui event OnShow form fmMini. Dan non aktif ketika aplikasi ini ditutup, dikodekan dalam event OnClose pada form fmMini. Klik ganda kedua event ini..

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

procedure TfmMini.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  Timer1.Enabled:= False;
end;

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.7 - 181.05 kB
2. Mini Chart Source Code - 2.48 kB
3. TChart Application ver.1.7 - 825.89 kB

Buka lagi project TChart dalam artikel yang lalu, atau download TChart Source Code ver.1.6 dan segera ekstrak di komputer kamu, sebelum membukanya buat dulu driver ODBC database linked (baca artikel Menampilkan Database dalam Grafik, terutama tentang cara membuat driver ODBC). Sesudah itu download Paging Source Code, ekstrak di komputer kamu.. Dan seperti artikel-artikel yang lalu tambahkan pada project TChart dengan cara klik kanan mouse pada project TChart.exe. Pilih menu Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Aktifkan form fmMainTChart (unit uMainTChart), kemudian klik ganda komponen pmOtherDemo.. klik ganda menu Paging Chart..

Ketikkan kode seperti di bawah ini..

procedure TfmMainTChart.miPagingChartClick(Sender: TObject);
begin 
  fmPaging.ShowModal;
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart‘ references form ‘fmPaging’ declarated in unit ‘uPaging’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run..

1. Membuat halaman grafik

Data yang di-plot dalam series grafik dilakukan pada saat form dibangun dengan kontruktor Create, aktifkan form fmPaging, klik ganda sel di sebelah kanan event OnCreate..

procedure TfmPaging.FormCreate(Sender: TObject);
begin
  Series1.FillSampleValues(100);
  sePaging.Value:= 18;
  ctPagingPageChange(ctPaging);
end;

Data sebanyak 100 data di-plot dalam Series1 dengan metode FillSampleValues. Dan property Value komponen sePaging diinisialisasikan dengan nilai 18. Nilai property tersebut menunjukkan banyaknya data per halaman, sebagai pengganti SpinEdit Points per Page pada sub tab Paging dari komponen TChart (atau property MaxPointsPerPage) yang nilainya bisa diubah ketika aplikasi dijalankan. Perhatikan gambar di bawah ini

Prosedur ctPagingPageChange dipanggil untuk menginisialisasi beberapa komponen.. Event OnPageChange ini terjadi ketika property Page komponen TChart telah diubah dan sebelum halaman grafik tersebut berubah. Property MaxPointsPerPage (atau SpinEdit Points per Page pada sub tab Paging) harus lebih besar dari 0 (nol) untuk mengaktifkan mekanisme pemberian nomor halaman secara otomatis. Klik ganda sel di sebelah kanan event OnPageChange pada komponen TChart ctPaging..

procedure TfmPaging.ctPagingPageChange(Sender: TObject);
begin
  ctPaging.UndoZoom;
  lCurrent.Caption:= 'Current/Total : '+IntToStr(ctPaging.Page)+
                     '/'+IntToStr(ctPaging.NumPages);
  btFirst.Enabled:= btPrevious.Enabled;
  btPrevious.Enabled:= ctPaging.Page > 1;
  btNext.Enabled:= ctPaging.Page < ctPaging.NumPages;
  btLast.Enabled:= btNext.Enabled;
end;

Untuk menghitung banyaknya halaman grafik dengan benar, komponen TChart harus tidak dalam keadaan diperbesar/diperkecil yaitu dengan memanggil metode UndoZoom. Informasi suatu halaman terhadap total halaman grafik ditampilkan melalui property Caption komponen lCurrent. Property Page komponen TChart menge-set halaman grafik saat ini sedang property NumPages menunjukkan total halaman grafik.

Untuk grafik yang mempunyai halaman lebih dari satu, komponen button btFirst dapat diakses tergantung aktif/tidaknya button btPrevious. Komponen button btPrevious akan aktif jika halaman grafik yang sekarang ditampilkan bukan halaman pertama. Dan button btNext akan aktif jika halaman grafik yang sekarang ditampilkan bukan halaman terakhirnya, sedang aktif/tidaknya button btLast tergantung pada aktif/tidaknya button btNext. Jika grafik hanya terdiri atas satu halaman maka keempat komponen button tersebut tidak aktif.

2. Mengubah setting halaman grafik

Perhatikan kembali gambar sub tab Paging di atas.. nilai SpinEdit Points per Page dan checkbox Scale Last Page bisa diubah melalui komponen sePaging dan chScale. Klik ganda pada komponen sePaging..

procedure TfmPaging.sePagingClick(Sender: TObject);
begin
  ctPaging.MaxPointsPerPage:= sePaging.Value;
  ctPagingPageChange(ctPaging);
end;

Komponen sePaging ini merupakan pengganti SpinEdit Points per Page, perubahan nilainya akan mempengaruhi banyaknya data per halaman (nilai property MaxPointsPerPage komponen TChart sama dengan nilai property Value komponen sePaging). Banyaknya halaman grafik mungkin akan berubah setiap kali ada perubahan nilai komponen sePaging sehingga prosedur ctPagingPageChange perlu dipanggil kembali untuk menyesuaikan keadaan beberapa komponen.

Jika pada saat mengedit komponen TChart, checkbox Scale Last Page pada sub tab Paging tidak di’centang’ maka halaman terakhir akan ditampilkan dengan range sumbu horisontal grafik sama dengan halaman yang lain. Jika sebaliknya maka skala halaman terakhir grafik akan diatur berdasarkan pada banyaknya titik yang tampak pada halaman terakhir tersebut. Untuk mengontrol property ini, digunakan chScale, klik ganda komponen ini..

procedure TfmPaging.chScaleClick(Sender: TObject);
begin
  ctPaging.ScaleLastPage:= chScale.Checked;
end;

3. Mengontrol halaman grafik

Keempat komponen button digunakan untuk menampilkan suatu halaman ke halaman lain, klik ganda pada salah satu komponen button tersebut. Keempatnya menggunakan sebuah prosedur ButtonClick..

procedure TfmPaging.ButtonClick(Sender: TObject);
begin
  if Sender = btFirst then
    ctPaging.Page:= 1
  else
  if Sender = btPrevious then
    ctPaging.PreviousPage
  else
  if Sender = btNext then
    ctPaging.NextPage
  else
    ctPaging.Page:= ctPaging.NumPages;
end;

Jika user menekan button btFirst maka halaman pertama grafik akan ditampikan. Jika btPrevious ditekan maka metode PreviousPage akan membawa ke halaman sebelumnya sedang untuk menampilkan halaman selanjutnya panggil metode NextPage yaitu ketika pengguna menekan button btNext. Dan halaman yang terakhir akan ditampilkan ketika user menekan button btLast.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.6 - 178.32 kB
2. Paging Source Code - 2.71 kB
3. TChart Application ver.1.6 - 824.68 kB

Artikel ini masih merupakan bagian dari project TChart, buka kembali project sebelumnya, atau kalau nggak ada download TChart Source Code ver.1.5, kemudian ekstrak di komputer kamu, jangan lupa untuk membuat driver ODBC database linked (atau baca kembali artikel Menampilkan Database dalam Grafik). Selanjutnya download Back Image Source Code, kemudian ekstrak dan seperti biasa tambahkan pada project TChart tersebut dengan meng-klik kanan mouse pada project TChart.exe. Pada menu yang muncul klik Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Agar bisa dipanggil melalui aplikasi TChart, aktifkan form fmMainTChart, kemudian klik ganda komponen popupmenu bernama pmOtherDemo.. pada popmenu yang muncul klik ganda menu Background Image..

Kemudian tambahkan code berikut

procedure TfmMainTChart.miBackImageClick(Sender: TObject);
begin 
  fmBackImage.ShowModal;
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart ‘ references form ‘fmBackImage’ declarated in unit ‘uBackImage’ which is not in your USES list. Do you wish to add it? tekan tombol Yes kemudian Tekan kembali tombol Run..

1. Inisialisasi aplikasi

Inisialisasi aplikasi untuk menentukan nilai awal dikodekan dalam event OnCreate form, klik ganda sel di sebelah kanan event OnCreate dari form fmBackImage..

procedure TfmBackImage.FormCreate(Sender: TObject);
begin
  Series1.FillSampleValues(100);
end;

Kode program di atas hanya untuk menambahkan data pada Series1 sebanyak 100 data dengan memanggil metode FillSampleValues.

2. Menentukan tampilan background grafik

Style background grafik dapat di-set dalam mode Stretch, Tile dan Center. Mode Stretch menyebabkan gambar mengambil ukuran dan bentuk komponen TChart, artinya jika ukuran dan bentuk komponen TChart diubah maka gambar akan ikut berubah. Dan seluruh gambar background akan ditampilkan seukuran komponen TChart meskipun ukuran gambar tersebut terlalu besar. Sedang dalam mode Tile, jika gambar background terlalu besar maka gambar tersebut tidak seluruhnya mengisi komponen TChart, tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambar kemudian terpotong sampai pada batas bawah dan kanan grafik. Pada mode Center, hanya posisi tengah gambar yang akan memenuhi background grafik jika ukuran gambar tersebut terlalu besar. Klik ganda pada salah satu dari ketiga komponen radiobutton (prosedure untuk ketiga komponen ini dijadikan satu, prosedur RadioButtonClick)

procedure TfmBackImage.RadioButtonClick(Sender: TObject);
begin
  if rbStretch.Checked then
    ctBackImage.BackImageMode := pbmStretch
  else
  if rbTile.Checked then
    ctBackImage.BackImageMode := pbmTile
  else
    ctBackImage.BackImageMode := pbmCenter;
end;

Gambar background grafik juga dapat dibuat memenuhi seluruh ‘dinding’ grafik atau hanya dalam kotak grafiknya saja tergantung pada nilai property BackImageInside-nya. Untuk mengendalikan nilai property tersebut gunakan komponen checkbox chInside, klik ganda komponen tersebut..

procedure TfmBackImage.chInsideClick(Sender: TObject);
begin
  ctBackImage.BackImageInside:= chInside.Checked;
end;

Artinya jika checkbox chInside di’centang’ maka background grafik hanya berada dalam kotak grafik.

3. Mengubah background grafik

Komponen TOpenDialog yang terpasang berfungsi untuk membuka folder tempat file gambar. Jika ingin menyaring file gambar dengan eketensi tertentu ketika kotak dialog Open ditampilkan, misalnya hanya file gambar bertipe Bitmap (bmp), ubah property Filter-nya. Caranya aktifkan jendela Object Inspector, klik ganda sel di sebelah kanan property Filter sehingga muncul kotak dialog Filter Editor. Isikan misalnya sel pertama sebelah kiri dengan File Bitmap dan sel di sebelah kanannya dengan *.bmp, kemudian tekan tombol Ok. Lebih jelasnya perhatikan gambar di bawah ini

Untuk memanggil kotak dialog Open, gunakan komponen button btBrowse, klik ganda komponen ini..

procedure TfmBackImage.btBrowseClick(Sender: TObject);
begin
  if OpenDialog1.Execute then
  begin
    ctBackImage.BackImage.LoadFromFile(OpenDialog1.FileName);
    gbStyle.Enabled:= True;
    chInside.Enabled:= True;
  end;
end;

Sebuah kotak dialog Open akan muncul ketika pengguna menekan tombol Browse.., kemudian jika kotak dialog tersebut dieksekusi (menekan tombol Open) maka dengan metode LoadFromFile, background grafik akan diisi dengan file gambar yang telah dipilih. Property Enabled komponen groupbox gbStyle dan komponen checkbox chInside diberi nilai True sehingga dapat diakses kembali setelah sebelumnya pada prosedur btClearClick dinon-aktifkan.

Sedang komponen button yang tersisa, btClear, untuk membersihkan background grafik. Klik ganda komponen tersebut..

procedure TfmBackImage.btClearClick(Sender: TObject);
begin
  ctBackImage.BackImage:= nil;
  gbStyle.Enabled:= False;
  chInside.Enabled:= False;
end;

Pada prosedur BClearClick di atas, gambar background grafik dihapus dengan memberi nilai nil pada property BackImage komponen TChart.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.5 - 35.14 kB
2. Back Image Source Code - 143.17 kB
3. TChart Application ver.1.5 - 819.96 kB

Buka kembali project TChart sebelumnya, atau kalau belum ada download TChart Source Code ver.1.4, kemudian ekstrak di komputer kamu, jangan lupa untuk membuat driver ODBC database linked (atau baca kembali artikel Menampilkan Database dalam Grafik). Selanjutnya download Statistic Source Code, kemudian ekstrak dan tambahkan pada project TChart tersebut dengan meng-klik kanan mouse pada project TChart.exe. Pada menu yang muncul klik Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Klik ganda komponen TChart pada form fmStatisticBar, kemudian perhatikan nilai property Data Source dari salah satu series statistik, misalnya Biggest. Seperti gambar di bawah terlihat nilai Data Source-nya adalah Function, dan fungsi yang dipilih adalah High.

Agar aplikasi yang baru saja ditambahkan bisa dipanggil melalui project TChart, aktifkan form fmMainTChart, kemudian klik ganda komponen popupmenu bernama pmOtherDemo.. pada popmenu yang muncul klik ganda menu Statistic Bar Series..

Kemudian tambahkan code berikut

procedure TfmMainTChart.miStatisticBarSeriesClick(Sender: TObject);
begin
  fmStatisticBar.ShowModal;
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart ‘ references form ‘fmStatisticBar’ declarated in unit ‘uStatisticBar’ which is not in your USES list. Do you wish to add it? tekan tombol Yes kemudian Tekan kembali tombol Run..

1. Inisialisasi aplikasi

Nilai-nilai awal dari aplikasi biasanya diberikan melalui event OnCreate (klik ganda sel di sebelah kanan event OnCreate pada form fmStatisticBar)

procedure TfmStatisticBar.FormCreate(Sender: TObject);
begin
 bRunTimer:= False;
 TeeEraseBack:= False;
 bsNewSeries:= nil;

 ctStatisticBar.View3D:= chView.Checked;
 ctStatisticBar.Chart3DPercent:= 35;

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

Variabel bRunTimer dan bsNewSeries, masing bertipe Boolean dan TBarSeries dideklarasikan dalam bagian public unit. Variabel bRunTimer dipakai untuk menentukan bekerja atau tidak-nya komponen TTimer, sedang variabel bsNewSeries untuk membuat Series bertipe Bar secara run-time sehingga diinisalisasi dengan nilai nil. Tampilan grafik dalam 3D tergantung nilai property Checked komponen checkbox chView, dan property Chart3DPercent ditentukan bernilai 35 %. Data sebanyak 6 (enam) titik di-plot pada Series1 dengan metode FillSampleValues. Property Dark3D Series1 nilainya ditentukan berdasarkan mode warna grafik yang dipakai (bernilai True jika dipakai mode lebih dari 256 warna) dengan metode IsScreenHighColor.

2. Menampilkan nilai statistik pada ‘kanvas’ grafik dan legend grafik

Nilai dari masing-masing series statistik ditampilkan dengan memanggil event OnAfterDraw komponen TChart, klik ganda sel di sebelah event tersebut..

procedure TfmStatisticBar.ctStatisticBarAfterDraw(Sender: TObject);
begin
  if not chTwoBar.Checked then
  begin
    with ctStatisticBar, 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;
end;

Nilai-nilai statistik ditampilkan ketika checkbox chTwoBar tidak diberi tanda ‘centang’. Untuk membersihkan pola sebelumnya, pola TBrush ditentukan bernilai bsClear. Property PixelsPerInch digunakan untuk memastikan font yang disalin dari kanvas ke printer mempunyai ukuran yang sama. Faktor konversi antara pixel dan inchi untuk font tersebut mengambil nilai yang sama dengan pada layar monitor. Huruf yang dipakai untuk menginformasikan nilai statistik dalam series statistik berukuran 10 pixel, dalam huruf tebal dan miring. Sedang warna huruf mengambil warna masing-masing series statistik tersebut. Untuk menuliskan teks dalam ‘kanvas’ grafik digunakan metode TextOut yang mempunyai syntax :

procedure TextOut(X, Y: Integer; const Text: string);

Penulisan teks tersebut dilakukan pada koordinat (X, Y). Koordinat X untuk semua teks ditentukan dari nilai tengah koordinat horisontal grafik yang diperoleh dengan menggunakan metode ChartXCenter. Nilai yang dihasilkan metode ini tidak sama dengan property Width dibagi dua karena margin grafik, margin sumbu, lebar legend grafik dan sebagainya bukan bagian dari ukuran horisontal grafik.

Sedang nilai Y berasal dari koordinat vertikal yang merupakan hasil pemanggilan metode CalYPos pada masing-masing series statistik. Dan teks yang ditampilkan terdiri atas judul masing-masing series statistik tersebut (property Title) dan nilai Mark-nya (property ValueMarkText).

Legend dari masing-masing series sebenarnya bisa langsung ditentukan dalam property LegendSyle dan TextStyle, tetapi bisa juga ditentukan melalui event OnGetLegendText komponen TChart, klik ganda sel di sebelah kanan event tersebut..

procedure TfmStatisticBar.ctStatisticBarGetLegendText(Sender: TCustomAxisPanel;
 LegendStyle: TLegendStyle; Index: Integer; var LegendText: String);
begin
  if chTwoBar.Checked then
    LegendText:= ctStatisticBar.Series[Index].Title+' : '+LegendText
  else
    LegendText:= ctStatisticBar.Series[Index].Title;
end;

Jika checkbox chTwoBar di’centang’, teks yang ditampilkan pada legend grafik terdiri atas judul setiap series ditambah nilai dari property LegendText-nya. Jika sebaliknya, legend grafik hanya menampilkan judul masing-masing series.

3. Membuat series data baru secara run-time

Pada aplikasi sebenarnya, mungkin pada saat aplikasi sedang berjalan kita perlu menambahkan satu atau lebih series data baru tanpa menghentikan proses. Tentu saja nilai statistiknya akan berubah dengan adanya series baru tersebut, begitu juga ketika series baru tersebut dihapus. Klik ganda pada komponen checkbox chTwoBar..

procedure TfmStatisticBar.chTwoBarClick(Sender: TObject);
begin 
  if chTwoBar.Checked then 
  begin 
    bsNewSeries:= TBarSeries.Create(Self);
    bsNewSeries.ParentChart:= ctStatisticBar;
    bsNewSeries.Title:= 'New Series';
    bsNewSeries.BarStyle:= bsPyramid;
    bsNewSeries.FillSampleValues(Series1.Count);

    AverageSeries.DataSources.Add(bsNewSeries);
    bsNewSeries.AddLinkedSeries(AverageSeries);

    BiggestSeries.DataSources.Add(bsNewSeries);
    bsNewSeries.AddLinkedSeries(BiggestSeries);

    SmallestSeries.DataSources.Add(bsNewSeries);
    bsNewSeries.AddLinkedSeries(SmallestSeries);
  end 
  else 
  begin 
    bsNewSeries.Free;
    bsNewSeries:= nil;
  end;
  Series1.RefreshSeries;
end;

Sebuah series baru bertipe Bar bernama ‘New Series’ akan dibuat jika user memberi tanda ‘centang’ pada komponen chTwoBar, dengan memanggil konstruktor Create. Series baru ini merupakan bagian dari komponen TChart ctStatisticBar, dengan memberi nilai ctStatisticBar pada property ParentChart-nya. Property Title-nya bernilai New Series, dan mempunyai style bar berbentuk piramid serta banyaknya data yang di-plot pada series baru tersebut sama dengan jumlah data pada Series1.

Untuk menghitung kembali nilai statistik, tambahkan series baru tersebut pada property DataSource masing-masing series statistik. Dan jika komponen checkbox chTwoBar tidak di’centang’ maka series baru tersebut dihapus kembali dengan menggunakan metode Free. Kemudian yang terakhir metode RefreshSeries akan me-refresh grafik pada Series1.

4. Menentukan tampilan series data

Ada dua buah komponen checkbox yang berfungsi untuk menentukan tampilan series data, chView dan chBarVisible, klik ganda pada masing masing..

procedure TfmStatisticBar.chViewClick(Sender: TObject);
begin
  ctStatisticBar.View3d:= chView.Checked;
end;

procedure TfmStatisticBar.chBarVisibleClick(Sender: TObject);
begin
  Series1.Active:= chBarVisible.Checked;
  if Assigned(bsNewSeries) then
    bsNewSeries.Active:= chBarVisible.Checked;
end;

Checkbox chView untuk menampilkan grafik dalam 3D jika di’centang’, kalau sebaliknya grafik dalam 2D. Sedang checkbox chBarVisible untuk menentukan apakah series data ditampilkan atau disembunyikan.

5. Mensimulasikan data yang ditampilkan dalam grafik

Simulasi untuk mem-plot data dalam Series1 atau series baru (bsNewSeries) digunakan komponen TTimer, klik ganda komponen ini..

procedure TfmStatisticBar.tmStatisticBarTimer(Sender: TObject);
var 
  t: Longint;
begin 
  t:= Random(Series1.Count);
  Series1.YValue[t]:= Series1.YValue[t]+Random(50)-25;
  if Random(100) < 8 then 
    Series1.BarStyle:= TBarStyle(Random(1+Ord(High(TBarStyle))));

  if Random(100) < 2 then 
    chView.Checked:= not chView.Checked;

  if Assigned(bsNewSeries) then 
    bsNewSeries.YValue[t]:= Random(500);
end;

Code di atas hanya simulasi data random agar pada demo ini bisa terlihat perubahan nilai Series1 akan mengubah series statistik, kamu bisa merubahnya dengan data yang diambil dari database atau dari sumber data online, lainnya. Untuk menjalankan/menghentikan proses gunakan komponen button btRun (klik ganda komponen button ini)

procedure TfmStatisticBar.btRunClick(Sender: TObject);
begin
  bRunTimer:= not bRunTimer;
  tmStatisticBar.Enabled:= bRunTimer;
  if bRunTimer then
    btRun.Caption:= 'Stop'
  else
    btRun.Caption:= '&Run';
end;

Proses untuk menjalankan/menghentikan penge-plot-an data tergantung pada nilai dari variabel bRunTimer.

6. Mencetak grafik dan men-copy grafik dalam clipboard

Grafik yang ditampilkan bisa langsung dicetak atau di-copy dalam clipboard yang selanjutnya bisa di-paste dalam aplikasi terapan lain misalnya, Photoshop atau Ms Word.

procedure TfmStatisticBar.btPrintClick(Sender: TObject);
begin
  ctStatisticBar.PrintLandscape;
end;

procedure TfmStatisticBar.btCopyClick(Sender: TObject);
begin
  ctStatisticBar.CopyToClipboardMetafile(True);
  ShowMessage('Grafik telah di-copy dalam clipboard');
end;

Metode PrintLandscape akan dipanggil ketika pengguna menekan komponen button btPrint. Metode tersebut akan mengeset printer pada orientasi Landscape (posisi kertas horisontal) kemudian metode Print akan dipanggil untuk mencetak gambar grafik tersebut.

Pada prosedur btCopyClick, metode CopyToClipboardMetafile akan menyalin seluruh area grafik ke clipboard dalam format metafile dan menampilkan sebuah pesan bahwa proses copy telah dilakukan.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.4 - 32.12 kB
2. Statistic Source Code - 3 kB
3. TChart Application ver.1.4 - 650.95 kB

Buka kembali project TChart seperti pada tulisan terdahulu, jika tidak punya download TChart Source Code ver.1.3, kemudian ekstrak dan klik ganda file TChart.dpr melalui Widows Explorer. Sesuai dengan paragraf awal artikel ini download Linked Database Source Code, kemudian ekstrak di komputer kamu.. sebelum kamu menambahkan file .pas ke project, buatlah terlebih dahulu driver ODBC karena jika dipaksakan maka sebuah pesan error [Microsoft][ODBC Driver Manager] Data source name not found and no default driver specified akan muncul, dan program Delphi kamu akan autoclose (tertutup sendiri).

Database yang akan dihubungkan dengan grafik memakai Ms Access, cara koneksi dengan program Delphi biasanya memakai komponen ADO melalui ODBC. Segera buat driver ODBC, dengan mengklik Start -> Control Panel.. pada windows yang ditampilkan klik ganda menu Administrative Tools, klik ganda lagi pada menu Data Sources (ODBC) sampai muncul kotak dialog ODBC Data Source Administrator, pilih tab System DSN dan lakukan langkah-langkah seperti gambar di bawah ini

Jika sudah selesai, klik kanan mouse pada project TChart.exe, pada menu yang muncul klik Add.. kemudian cari dan pilih 2 buah file .pas (uLinked, uqfmLinked) yang akan ditambahkan seperti gambar di bawah ini

Seperti biasa aktifkan form fmMainTChart, kemudian klik ganda komponen popupmenu bernama pmOtherDemo.. pada popmenu yang muncul klik ganda menu Linked Database..

Tambahkan code seperti di bawah ini untuk menampilkan aplikasi ini melalui aplikasi TChart

procedure TfmMainTChart.miLinkedDatabaseClick(Sender: TObject);
begin
 fmLinked.ShowModal
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart‘ references form ‘fmLinked’ declarated in unit ‘uLinked’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run.. Jika tidak ada pesan lain yang muncul berarti aplikasi telah berjalan dengan baik.

1. Menghubungkan database dengan komponen grafik

Komponen yang dipakai dalam unit uLinked ini, sebenarnya turunan dari komponen TChart yaitu TDBChart, karena untuk menghubungkan database (melalui dataset) lebih cocok menggunakan komponen TDBChart. Selain penambahan nilai Dataset dalam property Data Source dari komponen TChartSeries, semua property-nya sama dengan komponen TChart. TChartSeries adalah komponen yang ada di dalam TDBChart yang nantinya dipakai untuk menampilkan data dalam wujud grafik.. untuk lebih jelasnya klik ganda komponen TDBChart pada unit uLinked, di sana ada sebuah Series1 (series jenis Bar, atau TBarSeries), perhatikan gambar di bawah

Pada gambar di atas dipilih data source jenis Dataset dan data yang akan ditampilkan berasal dari tabel Orders (direfresentasikan dalam komponen tbOrdes), kemudian sebagai sumbu Y dipilih field AmountPaid, sedang sumbu X field SaleDate.

Perhatikan deklarasi yang ditambahkan dalam bagian published unit uLinked (bagian ini menggantikan bagian public, sebenarnya tidak ada alasan khusus untuk menghapus bagian public.. daripada kosong, kan?!…) juga function GetCompanyGrid, yang berisi code :

function TfmLinked.GetCompanyGrid: String;
begin
 Result:= tbCustomer.FieldbyName('COMPANY').AsString;
end;

Function ini hanya untuk mendapatkan nilai field COMPANY dari record yang dipilih, ketika variabel FCompanyGrid dipanggil. Variabel ini nantinya dipakai sebagai title dari series dalam report dengan menggunakan Quick Report..

Prosedur untuk me-refresh data yang ditampilkan dalam grafik

Ketika terjadi scrolling atau editing data pada dataset master (dsCustomer, reprensetasi dari tabel Customer) maka data pada dataset client (dsOrders, representasi dari tabel Orders) otomatis berubah sesuai dengan data master-nya. Logikanya data-data yang ditampilkan dalam grafik seharusnya berubah mengikuti nilai dari tabel Orders (ingat dataset yang dimasukkan dalam Series1 adalah tbOrders) . Untuk itu Klik ganda sel di sebelah kanan event OnDataChange pada komponen TDataSource dsCustomer, dan lihat code-nya.

procedure TfmLinked.dsCustomerDataChange(Sender: TObject; Field: TField);
begin
 dbcLinked.CheckDataSource(Series1);
end;

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

Mem-preview report

Selain ditampilkan dalam aplikasi, agar grafik dapat dicetak maka perlu di-preview terlebih dahulu. Manfaatkan komponen Button yang ada dengan mengklik ganda komponen tersebut dan ketikkan code berikut :

procedure TfmLinked.btPrintPreviewClick(Sender: TObject);
begin
 qrLinked.Preview;
end;

2. Membuat report dengan Quick Report

Berikut tip untuk yang belum mengetahui cara praktis membuat form report dengan QuickReport, klik menu File -> New -> Other… pada kotak dialog New Items yang muncul, aktifkan tab New pilih Report.. maka sebuah form yang hanya terdiri atas komponen TQuickRep akan dibuatkan.

Dalam form qrLinked (dari unit uqfmLinked), hanya band summary yang diaktifkan (cuma property Bands.HasSummary yang diberi nilai True), kemudian komponen TQRChart ditambahkan pada band summary ini. Pada komponen TQRChart tersebut memang disengaja tidak ada series yang dibuat, karena akan dibuat secara realtime melalui prosedur event BeforePrint dari komponen TQuickRep qrLinked, seperti code di bawah ini.. tetapi sebelumnya deklarasikan variabel bsNewSeries dalam bagian public dari unit uqfmLinked.

public
 bsNewSeries: TBarSeries;

procedure TqrLinked.QuickRepBeforePrint(Sender: TCustomQuickRep;
  var PrintReport: Boolean);
begin
 if  bsNewSeries = nil then
 begin
   bsNewSeries:= TBarSeries.Create(Self);
   bsNewSeries.ParentChart:= qrdbcLinked;
   bsNewSeries.Title:= fmLinked.FCompanyGrid;
   bsNewSeries.BarStyle:= bsRectangle;
   bsNewSeries.SeriesColor:= clGreen;
   bsNewSeries.Marks.Visible:= False;
   bsNewSeries.DataSource:= fmLinked.tbOrders;
   bsNewSeries.YValues.ValueSource:= 'AmountPaid';
   bsNewSeries.XLabelsSource:= 'SaleDate';
 end;
end;

Prosedur di atas sebenarnya hanya memberi nilai pada beberapa property dari series dalam bentuk code. Catatan yang perlu diperhatikan adalah title dari series yang dibuat secara realtime tersebut sesuai dengan nilai dari variabel FCompanyGrid pada unit uLinked, warna bar ‘Hijau’, dan Data Source, sumbu Y, sumbu X dibuat sama dengan komponen TDBChart dalam unit uLinked.

Untuk membebaskan memori dari series yang terbentuk secara realtime tadi maka klik ganda sel di sebelah kanan event AfterPreview dari komponen TQuickRep qrLinked.

procedure TqrLinked.QuickRepAfterPreview(Sender: TObject);
begin
 bsNewSeries.Free;
 bsNewSeries:= nil;
end;

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.3 - 8.65 kB
2. Linked Database Source Code - 23.43 kB
3. TChart Application ver.1.3 - 647 kB

Lanjutkan project TChart pada tulisan terdahulu, atau download TChart Source Code ver.1.2, kemudian ekstrak dan jalankan program Delphi, buka project TChart (atau klik ganda file TChart.dpr melalui Widows Explorer). Selanjutnya download Keyboard Control Source Code, kemudian ekstrak dan tambahkan pada project TChart tersebut dengan meng-klik kanan mouse pada project TChart.exe. Pada menu yang muncul klik Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Aktifkan form fmMainTChart, kemudian klik ganda komponen popupmenu bernama pmOtherDemo.. pada popmenu yang muncul klik ganda menu Keyboard Scrolling..

Tambahkan code seperti di bawah ini untuk menampilkan aplikasi ini melalui aplikasi TChart

procedure TfmMainTChart.miKeyboardScrollingClick(Sender: TObject);
begin
  fmKeyboard.ShowModal;
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart ‘ references form ‘fmKeyboard’ declarated in unit ‘uKeyboard’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run.. seharusnya aplikasi TChart telah berjalan dengan baik..

1. Inisialisasi aplikasi melalui prosedur event OnCreate dan OnShow form fmKeyboard

Seperti aplikasi pada umumnya, aplikasi ini juga perlu diinisialisasi melalui event OnCreate dan OnShow form ini (fmKeyboard). Klik ganda sel di sebelah kanan event OnCreate form fmKeyboard

procedure TfmKeyboard.FormCreate(Sender: TObject);
begin
 Series1.FillSampleValues(500);
end;

prosedur di atas hanya untuk menginisialisasi grafik, yaitu nilai random dengan rentang sebanyak 500 data di-plot dalam TChartSeries melalui metode FillSampleValues.

Berikutnya klik ganda sel di sebelah kanan event OnShow form fmKeyboard

procedure TfmKeyboard.FormShow(Sender: TObject);
begin 
  ctKeyboard.SetFocus;
end;

Proses zoom dan scrolling grafik dengan menggunakan tombol Keyboard hanya dapat dilakukan jika komponen TChart yang dimaksud menjadi focus form. Sehingga setiap kali aplikasi ini ditampilkan, komponen TChart (ctKeyboard) harus di-set menjadi fokus. Prosedur event OnShow tersebut sebenarnya bisa diganti (dihapus) dengan memberi nilai ctKeyboard pada property ActiveControl form fmKeyboard. Tetapi jika aplikasi mempunyai komponen TChart yang dapat di-zoom dan scrolling lebih dari satu, pemberian nilai property ActiveControl tersebut tidak dapat dilakukan

2. Prosedur untuk mengontrol grafik dengan Keyboard

Ketika user menekan suatu tombol Keyboard (atau kombinasi beberapa tombol) dan form tersebut sedang diaktifkan, perintah-perintah dalam event OnKeyDown akan dijalankan. Event OnKeyDown akan terjadi jika property KeyPreview form bernilai True. Klik ganda sel di sebelah kanan event OnKeyDown form fmKeyboard

procedure TfmKeyboard.FormKeyDown(Sender: TObject; var Key: Word;
 Shift: TShiftState);
var
  dX, dY, dXRange, dYRange: Double;
begin
  dX:= 0;
  dY:= 0;

  with Series1.GetHorizAxis do dXRange:= Maximum - Minimum;
  with Series1.GetVertAxis do dYRange:= Maximum - Minimum;

  if ssShift in Shift then
  begin
    Case key of
      VK_LEFT, VK_UP    : ctKeyboard.ZoomPercent( 110 );
      VK_RIGHT, VK_DOWN : ctKeyboard.ZoomPercent( 90 );
    end;
    exit;
  end
  else
  Case key of
    VK_LEFT  : dX:= dXRange/100;
    VK_RIGHT : dX:= -dXRange/100;
    VK_UP    : dY:= -dYRange/100;
    VK_DOWN  : dY:= dYRange/100;
    VK_NEXT  : dY:= dYRange/10;
    VK_PRIOR : dY:= -dYRange/10;
    VK_SPACE : begin ctKeyboard.UndoZoom; Exit; end;
  end;

  if chInverted.Checked then
  begin
    dX:= -dX;
    dY:= -dY;
  end;

  with ctKeyboard do
  begin
    LeftAxis.Scroll(dY, chLimit.Checked);
    RightAxis.Scroll(dY, chLimit.Checked);
    BottomAxis.Scroll(dX, chLimit.Checked);
    TopAxis.Scroll(dX, chLimit.Checked);
    SetFocus;
  end;
end;

Proses scrolling komponen TChart sebenarnya hanya menggeser range skala sumbu horisontal atau skala sumbu vertikal (nilai property Maximum dikurangi dengan property Minimum). Nilai skala maksimum dan minimum sumbu horisontal grafik diperoleh setelah dihubungkan dengan menggunakan metode GetHorizAxis dan untuk sumbu vertikal dengan metode GetVertAxis. Range skala sumbu horisontal grafik disimpan dalam variabel dXRange, sedang variabel dYRange untuk menyimpan range skala sumbu vertikal grafik. Flag ssShift merupakan salah satu nilai klas bertipe TShiftState yang digunakan untuk menentukan keadaan tombol Keyboard Alt, Ctrl, Shift dan tombol Mouse. Tabel berikut ini menjelaskan masing-masing arti nilai flag :

Pada prosedur event OnKeyDown di atas, jika tombol Shift ditekan bersamaan dengan tombol panah kiri atau atas (VK_LEFT, VK_UP) maka grafik diperbesar 1,1 kalinya (110 %). Dan grafik diperkecil 90 % jika kombinasi tombol Shift dan tombol panah kanan atau bawah (VK_RIGHT, VK_DOWN) ditekan user. Penggunaan prosedur Exit untuk mengeluarkannya dari prosedur yang sekarang sedang dijalankan. Jika tombol Keyboard Shift tidak ditekan, kemudian user menekan salah satu tombol panah atau Page Up atau Page Down maka proses scrolling grafik akan dilakukan dengan menggunakan metode Scroll pada masing-masing sumbu grafik. Metode Scroll mempunyai sintax :

procedure Scroll(Const Offset: Double; InsideLimits: Boolean);

metode ini akan mengeser nilai skala maksimum dan minimum suatu sumbu grafik berdasarkan konstanta Offset, dan jika ingin menggeser grafik secara tidak terbatas maka variabel InsideLimits harus bernilai False. Pada prosedur event OnKeyDown di atas, nilai variabel InsideLimits tergantung pada nilai property Checked komponen TCheckBox chLimit atau sederhananya di-centang atau tidak pada checkbox Scrolling Limited.

Nilai variabel dX menentukan scrolling sumbu horisontal sedang variabel dY untuk scrolling sumbu vertikal grafik. Kedua variabel tersebut pertama kali diinisialisasi dengan nilai 0 untuk menghapus nilai sebelumnya. Jika user menekan salah satu tombol panah maka grafik akan digeser searah tanda panah tersebut, sebesar nilai range sumbu grafik dibagi dengan 100.

Pada sumbu horisontal, nilai range sumbu horisontal (variabel dXRange) adalah 500 data sehingga jika pengguna menekan tombol panah kiri maka grafik akan digeser ke kiri sebesar 5 titik (= 500/100).

Sedang jika pengguna menekan tombol Page Up (VK_PRIOR) atau Page Down (VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range sumbu vertikal (variabel dYRange) dibagi 10. Nilai range sumbu vertikal tergantung pada data random yang di-plot dalam TChartSeries.

Untuk me-reset zoom grafik digunakan tombol SPACE (VK_SPACE) dengan memanggil metode UndoZoom. Dan arah proses scrolling akan terbalik dengan arah tombol panah jika checkbox Inverted Scrolling di-centang, yaitu hanya dengan memberi nilai minus pada variabel dX dan dY.

3. Mengembalikan fokus pada grafik setelah mouse dialihkan ke area di luar grafik

Zoom dan Scrolling dengan Keyboard hanya dapat terjadi jika fokus aplikasi ada pada komponen TChart yang dimaksud. Makanya setelah mengklik dua buah checkbox, Inverted Scrolling dan Scrolling Limited, fokus perlu dikembalikan ke grafik (komponen TChart ctKeyboard). Klik ganda masing masing komponen TCheckBox, sehingga pada jendela Code Editor akan muncul dua buah prosedur bernama chInvertedClick dan chLimitClick.

procedure TfmKeyboard.chInvertedClick(Sender: TObject);
begin
  ctKeyboard.SetFocus;
end;

procedure TfmKeyboard.chLimitClick(Sender: TObject);
begin
  ctKeyboard.SetFocus;
  if chLimit.Checked then 
    ShowMessage('Scrolling grafik terbatas hanya pada data yang telah di-plot.'+#13+
                'Lakukan zoom terlebih dahulu sebelum scrolling grafik.');
end;

Tambahan kode program pada prosedur chlimitsClick, untuk menampilkan sebuah pesan ketika checkbox Scrolling Limited di-centang.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.2 - 6.44 kB
2. Keyboard Control Source Code - 2.18 kB
3. TChart Application ver.1.2 - 297.07 kB

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