Membuat Laporan Dalam Grafik

Membuat Laporan Dalam Grafik

Tujuan Instruksional Khusus:

1.      Bisa menampilkan laporan dalam bentuk grafik

2.      bisa membuat beberapa jenis grafik

Pada bab ini dijelaskan mengenai pembuatan laporan dalam bentuk grafik. Kelebihan grafik dibanding dengan laporan biasa adalah lebih mudah dilihat dan dianalisa karena secara visual bisa dilihat besar kecilnya suatu nilai disertai dengan efek warna. Seperti peribahasa mengatakan, “dengan gambar, bisa menerangkan seribu kata”.

Untuk membuat grafik dalam halaman ASP dibutuhkan komponen mtambahan karena ASP sendiri tidak menyediakan pembuatan grafik. Ada banyak sekali komponen grafik yang bisa digunakan baik yang free/gratis maupun yang komersial. Untuk materi ini, digunakan komponen FusionChart merupakan komponen grafik yang free tetapi memiliki fitur yang sangat menarik berbasiskan flash.

16.1    Grafik dengan Fusion Chart

FusionChart adalah sekumpulan file-file swf untuk menampilkan data dalam bentuk grafik yang menarik. Karena menggunakan macromedia flash, sehingga memudahkan dalam proses instalasi, bisa untuk beberapa script server (ASP, PHP, JSP, DotNet dan lain lain) serta compatible dengan banyak browser.

Untuk materi ini, digunakan versi yang free dengan kemampuan animasi dalam proses menampilkan grafik, tampilan yang menarik, clickable chart, dan mendukung 6 jenis grafik yaitu:

1.      3D Coloumn Chart

2.      3D Pie Chart

3.      3D Area Chart

4.      3D Horisontal Bar Chart

5.      Line Chart

6.      Pipe Chart

Instalasi komponen grafik ini cukup mudah, cukup dengan meng-copy semua file SWF dari file kedalam direktori pada direktori aplikasi web-nya.

Contoh1: Menampilkan grafik dalam halaman web

Untuk menambahkan grafik kedalam halaman web, dengan menggunakan dreamweaver, tambahkan flash yang melekat ke dalam halaman web dan data yang diambil dari file xml

Berikut langkah-langkah dalam menampilkan grafik seperti pada gambar 16.1 dengan data seperti berikut:

Langkah-langkah:

1.      Buat direktori bab16

2.      Copy file-file dari bab15

3.      Buat directory Charts, dan copykan semua file SWF dari file FusionChart yang sudah disediakan

4.      Buat file baru, simpan dengan nama file grafik.htm

5.      Tambahkan file flash FC2Column.swf dari direktori charts ke dalam halaman tersebut. Berikan parameter dataUrl=data.xml pada file flash tersebut. Pastikan swflash.cab#version=6,0,0,0

6.      Berikut source file grafik.htm

7.      Buat file xml baru sebagai data dari tabel diatas dan simpan dengan nama file data. Xml. Berikut source file data.xml

16.2    Grafik Rekap Peminjaman Per Bulan

Berikutnya akan dibuat grafik rekap peminjaman bulanan dimana data diambil dari database dan ditampilkan dalam format xml, karena komponen grafik flash hanya bisa membaca data dalam format xml yang sudah ditentukan.

Pada bab 14 telah dibuat halaman laporan rekapPeminjaman bulanan, dimana dari halaman ini dibuat link untuk menampilkan grafiknya seperti terlihat pada gambar 16.2

Contoh2 : membuat grafik rekap peminjaman bulanan

Langkah-langkah:

1.      Pada file rptPinjamBulanan.asp, buat link menuju GrafikPinjamBulanan.asp

2.      Buat file baru, simpan dengan nama file: GrafikPinjamBulanan.asp

3.      Include file conn.asp, bagianAtas.asp, bagianBawah.asp

4.      Tambahkan object flash dalam bagian isi halaman tersebut dengan dataUrl=dataPinjamBulanan.asp

5.      Buat file baru, simpan dengan namadataPinjamBulanan.asp yang digunakan untuk mengambil data dari database dan menampilkan dalam format xml

6.      Include FC_Colors.asp, conn.asp. File FC_colors dapat dicopy direktori:

7.      berikut source file dataPinjamBulanan.asp:

16.3    Mengubah Jenis Grafik

Berikutnya adalah membuat grafik dengan bentuk yang lain, yaitu dalam bentuk PIE. Grafik bentuk PIE menampilkan grafik dalam bentuk lingkaran dan bermanfaat untuk menunjukan data dalam bentuk prosentase.

Dari grafik batang rekap peminjaman bulanan, akan dibuat dalam bentuk grafik PIE seperti terlihat pada gambar 16.3

Contoh3: Grafik PIE Rekap Peminjaman Bulanan

Langkah-langkah:

1.      Pada file GrafikPinjamBulanan.asp, buat link menuju file GrafikPiePinjamBulanan.asp

2.      Copy file GrafikPinjamBulanan.asp, simpan dengan nama file: GrafikPiePinjamBulanan.asp. .asp

3.      Pada bagian object flash, modifikasi FC2Column.swf dengan file FC2Pie3D.swf

16.4    Membuat Clickable Chart

Berikutnya adalah menampilkan detail data dari suatu data grafik dengan meng-click bagian dari grafik tersebut. Dengan meng-click bagian tertentu dari tabel dimaksudnya untuk menampilkan detail data tersebut.

Dari grafik summary peminjaman bulanan diatas, seorang pengguna bisa melihat detail dari peminjaman bulan tersebut dengan meng-click data pada bulan yang diinginkan, seperti terlihat pada gambar 16.1

Langkah-langkah

1.      Copy file dataPinjamBulanan.asp simpan dengan nama dataPinjamBulanan2.asp

2.      Modifikasi file dataPinjmBulanan2.asp tambahkan atribut link pada bagian seperti berikut (cetak tebal):

3.      Modifikasi file grafik GrafikPiePinjamBulanan.asp untuk sebagai berikut:

4.      Buat file baru, simpan dengan nama

5.      Include file conn.asp, bagianAtas.asp, bagianBawah.asp

6.      Buat query untuk menampilkan detail transaksi pada bulan tahun yang dipilih

7.      Berikut source file

16.5    Latihan

1.      Buatlah grafik untuk laporan dalam bentuk grafik untuk Top 3 koleksi terlaris

Tips: Gunakan query dibawah ini untuk mendapatkan top 3 koleksi terlaris

2.      Buatlah jenis grafik yang berbeda dari no 1