Ukuran grafik dapat diubah sesuai dengan perubahan ukuran form induknya, dan garis divider merupakan garis pembatas antara titik baru dan titik lama yang di-plot dalam grafik.
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
