2 Grafi k Garis Computer-Aided Sofware Engineering CASE

240 Konsep Pemrograman Komputer Berbasis Teks dan Grafi s data[ ] = row[1]; leg[ ] = row[0]; } graph = new Graph350,250,auto; graph-SetScaletextint; graph-img-SetMargin50,30,50,50; graph-SetShadow; graph-title-SetGrafi k Batang; graph-xaxis-SetTickLabelsleg; bplot = new LinePlotdata; bplot-value-Show; bplot-value-SetFontFF_ARIAL,FS_BOLD; bplot-value-SetAngle45; bplot-SetLegendBanyak data; graph-Addbplot; graph-Stroke; ? Penjelasan Kode Program include JPGraphJPGraph.php; include JPGraphJPGraph_line.php; Baris di atas digunakan agar dapat mengakses class graph dengan jenis graph yang digunakan berbentuk garis dari library JPGraph db = mysql_connectlocalhost, root, or diemysql_error; mysql_select_dbtest,db or diemysql_error; sql = mysql_querySELECT FROM data_grafi k or diemysql_error; Baris di atas digunakan untuk koneksi MySQL dengan database ‘test’ dan nama tabel ‘data_grafi k’ yang telah dibuat sebelumnya whilerow = mysql_fetch_arraysql { 241 Konsep Pemrograman Komputer Berbasis Teks dan Grafi s data[ ] = row[1]; leg[ ] = row[0]; } Setelah berhasil menjalankan koneksi, data fi eld pertamarow[0] = dataX disimpan ke dalam leg[ ] sedangkan fi eld keduarow[1] = dataY disimpan dalam data[ ] graph = new Graph350,250,auto; Baris di atas adalah untuk membuat graph baru dengan lebar=350 dan panjang=250.”auto” dimaksudkan agar proses selanjutnya dilakukan oleh library secara otomatis. graph-SetScaletextint; Baris ini adalah menentukan tipe dari axis X dan Y yang digunakan. Axis X diset bertipe ‘text’ sedangkan axis Y bertipe ‘int’. Beberapa tipe lain yang dapat digunakan adalah SetScaleloglog dan SetScalelinlog graph-img-SetMargin50,30,50,50; Baris di atas untuk menentukan margin dari graph yang digunakan dengan urutan besar margin kiri, kanan, atas dan bawah graph. graph-SetShadow; Kode Baris di atas untuk menampilkan bayangan pada graph yang akan ditampilkan graph-title-SetGrafi k Garis; Judul dari graph yang dibuat diberi nama “Grafi k Garis” graph-xaxis-SetTickLabelsleg; Axis X dari graph ditentukan dari dataX yang sebelumnya telah disimpan dalan leg bplot = new LinePlotdata; Kode baris diatas digunakan untuk membuat jenis grafi k yang ditampilkan yaitu grafi k garis dengan isi dataY yang telah disimpan sebelumnya di dalam data bplot-value-Show; 242 Konsep Pemrograman Komputer Berbasis Teks dan Grafi s bplot-value-SetFontFF_ARIAL,FS_BOLD; bplot-value-SetAngle45; bplot-SetLegendBanyak data; Kode baris di atas adalah untuk menampilkan nilai dari grafi k garis dengan Font yang digunakan Arial dengan tipe Bold. Nilai yang ditampilkan akan memiliki kemiringan 450 . Diberikan juga legend dari nilai grafi k dengan nama ‘Banyak data’ graph-Addbplot; Baris di atas untuk memasukkan grafi k garis ke dalam graph yang telah dibuat sebelumnya. graph-Stroke; Kode Baris di atas diguanakn untuk menampilkan graph yang berisi grafi k garis pada browser. Bentuk grafi k pada browser:

18. 3 Grafi k Batang

Kita dapat mengubah jenis grafi k yang digunakan dari bentuk garis menjadi grafi k batang dengan mengubah baris include fi le kedua menjadi include JPGraphJPGraph_bar.php; Setelah itu, dalam kode baris pembuatan grafi k diganti menjadi bplot = new BarPlotdata; 243 Konsep Pemrograman Komputer Berbasis Teks dan Grafi s Kode program untuk pembuatan grafi k batang dengan data yang sama adalah sebagai berikut: ? include JPGraphJPGraph.php; include JPGraphJPGraph_bar.php; db = mysql_connectlocalhost, root, or diemysql_ error; mysql_select_dbtest,db or diemysql_error; sql = mysql_querySELECT FROM data_grafi k or diemysql_error; whilerow = mysql_fetch_arraysql { data[ ] = row[1]; leg[ ] = row[0]; } graph = new Graph350,250,auto; graph-SetScaletextint; graph-img-SetMargin50,30,50,50; graph-SetShadow; graph-title-SetGrafi k Batang; graph-xaxis-SetTickLabelsleg; bplot = new BarPlotdata; bplot-value-Show; bplot-value-SetFontFF_ARIAL,FS_BOLD; bplot-value-SetAngle45; bplot-SetLegendBanyak data; graph-Addbplot; graph-Stroke; ?