Menampilkan Nilai Statistik dari Grafik

Untuk membuat nilai statistik dari data yang secara kontinyu berubah bisa langsung ditampilkan melalui grafik, fasilitas ini akan mempercepat user dalam menganalisa data.

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

Related Posts

  1. Menampilkan Database dalam Grafik
  2. Zoom dan Scrolling Grafik dengan Keyboard
  3. Membuat Cross-hair pada Grafik dengan Komponen TChart
  4. TChart Component
  5. TPDJButton Component
avatar

About rumono

Bukan siapa-siapa, hanya seorang ‘manusia’ yang pernah lahir di suatu tempat di Brebes, Jawa Tengah. Sangat gemar bacaan sejarah dunia masa lalu, sejarah perang dan pribadi-pribadi yang memberi warna sejarah dunia. Nge-game pun bisa dilakoni sampai berhari-hari asal ada hubungannya dengan sejarah dunia dan perang...