Menggambar Diagram Garis dengan PHP

Dalam Dunia php semua hal bisa kita peroleh dan dapat kita kreasikan, bahkan sampai membuat grafik desain menggunakan php. Kali ini saya akan membahas tentang diagram garis menggunakan php. Pernahkah anda mencobanya? mari kita simak langkah-langkah dibawah ini.

Gambar Diagram garis dgn titik-titik sbb:

x y
10 123
20 456
30 366
40 245
50 123
60 234
70 876
80 98
90 234
100 345

Dengan gambar diagram garisnya sbb:

Selanjutnya akan dibuat dgn PHP, tetapi ada sedikit kerumitan pada waktu memplot titik-titiknya , karena adanya perbedaan nilai titik pada sistem koordinat layar monitor  dan sistem koordinat Diagram Garis.

Untuk mengatasi hal ini , maka kita gunakan fungsi transformasi koordinat dengan input koordinat Diagram.  Fungsi transformasi ini mengubah nilai koordinat Diagram menjadi nilai koordinat Layar Monitor.

Ini adalah fungsi untuk mentranformasikan koordinat Diagram Garis menjadi koordinat layar.

Pada contoh ini kita buat nilai   x1,y1,x2,y2 , X_Max , X_Min sbb :

Output halaman di browser setelah DiagramGaris.php dijalankan

Listing lengkap DiagramGaris.php

( referensi = www.php.net )

<?php

header (“Content-type: image/png” );

 

// Nilai pada Sistem Koordinat LAYAR MONITOR

$X_Max =  1000;

$Y_Max =   800;

 

// Nilai pada Absis (x)  Diagram Garis

$x1    =     0;

$x2    =   100;

 

// Nilai pada Or (x)  Diagram Garis

$y1    =     0;

$y2    =   900;

 

 

// Fungsi Transformasi nilai x Diagram Garis ke nilai Koordinat Layar Komputer

function x_aksen($x, $x1, $x2 , $X_Max)

{

$m =  $X_Max  / ( $x2 – $x1 );

$x_aksen = $m * $x;

return $x_aksen;

}

 

// Fungsi Transformasi nilai y Diagram Garis ke nilai Koordinat Layar Komputer

function y_aksen($y, $y1, $y2 , $Y_Max)

{

$m =  – $Y_Max  / ( $y2 – $y1 );

$y_aksen = $m * $y + $Y_Max;

return $y_aksen;

}

 

// Membuat daerah gambar di layar komputer

$Gambarku = @imagecreatetruecolor($X_Max, $Y_Max)

or die(“Tidak Dapat Membuat Daerah Gambar yang Bar” );

 

// Mendefinisikan warna

$Warna_Teks  = imagecolorallocate($Gambarku, 255, 255, 224);

$Warna_Garis = imagecolorallocate($Gambarku, 124, 120, 224);

 

// Menggambar Judul

$title = “Diagram Garis”;

imagestring($Gambarku, 100, 5, 5,  $title, $Warna_Teks);

 

/// MENGGAMBAR GARIS Diagram Garis

// Garis 1 – dari (0 , 0) ke (10 , 123)

imageLine($Gambarku, x_aksen(0,$x1,$x2,$X_Max),   y_aksen(0,$y1,$y2,$Y_Max),

x_aksen(10,$x1,$x2,$X_Max),  y_aksen(123,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 2 – dari (10 , 123) ke (20 , 456)

imageLine($Gambarku, x_aksen(10,$x1,$x2,$X_Max),  y_aksen(123,$y1,$y2,$Y_Max),

x_aksen(20,$x1,$x2,$X_Max),  y_aksen(456,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 3 – dari (20 , 456) ke (30 , 366)

imageLine($Gambarku, x_aksen(20,$x1,$x2,$X_Max),  y_aksen(456,$y1,$y2,$Y_Max),

x_aksen(30,$x1,$x2,$X_Max),  y_aksen(366,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 4 – dari (30 , 366) ke (40 , 245)

imageLine($Gambarku, x_aksen(30,$x1,$x2,$X_Max),  y_aksen(366,$y1,$y2,$Y_Max),

x_aksen(40,$x1,$x2,$X_Max),  y_aksen(245,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 5 – dari (40 , 245) ke (50 , 123)

imageLine($Gambarku, x_aksen(40,$x1,$x2,$X_Max),  y_aksen(245,$y1,$y2,$Y_Max),

x_aksen(50,$x1,$x2,$X_Max),  y_aksen(123,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 6 – dari (50 , 123) ke (60 , 234)

imageLine($Gambarku, x_aksen(50,$x1,$x2,$X_Max),  y_aksen(123,$y1,$y2,$Y_Max),

x_aksen(60,$x1,$x2,$X_Max),  y_aksen(234,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 7 – dari (60 , 234) ke (70 , 876)

imageLine($Gambarku, x_aksen(60,$x1,$x2,$X_Max),  y_aksen(234,$y1,$y2,$Y_Max),

x_aksen(70,$x1,$x2,$X_Max),  y_aksen(876,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 8 – dari (70 , 876) ke (80 , 98)

imageLine($Gambarku, x_aksen(70,$x1,$x2,$X_Max),  y_aksen(876,$y1,$y2,$Y_Max),

x_aksen(80,$x1,$x2,$X_Max),  y_aksen(98,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 9 – dari (80 , 98) ke (90 , 234)

imageLine($Gambarku, x_aksen(80,$x1,$x2,$X_Max),  y_aksen(98,$y1,$y2,$Y_Max),

x_aksen(90,$x1,$x2,$X_Max),  y_aksen(234,$y1,$y2,$Y_Max),

$Warna_Garis);

 

// Garis 10 – dari (90 , 234) ke (100 , 345)

imageLine($Gambarku, x_aksen(90,$x1,$x2,$X_Max),  y_aksen(234,$y1,$y2,$Y_Max),

x_aksen(100,$x1,$x2,$X_Max), y_aksen(345,$y1,$y2,$Y_Max),

$Warna_Garis);

 

//finalizing

imagepng($Gambarku);

imagedestroy($Gambarku);

?>

Selamat mencoba ^_^

 

Zulkarnain Akib

Zulkarnain adalah salah satu seorang Dosen di STMIK & POLITEKNIK PalComTech. Materi yang diajarkan beliau adalah pemrograman.

11 comments

  1. Mantap… pak zul….. :2thumbup

  2. ni dasarnya di grafik komputer (belajar itung koordinat). kalo dak salah hehe

  3. we e e e e, borera pak jul ini, dahsyaaaaat :cendol :cendol :cendol :cendol :cendol

  4. :pertamax Muuuanntap Tenan..!!

  5. wew…banyak nian koding ny

    mantab pak jol…. :thumbup: :thumbup:

  6. nanti saya coba kirim artikel mengenai chart juga :D

    yg scriptnya lebih simpel :)

  7. muntapzzzzzz bgt pak zuL………..
    salam kenal dari saya yang bru mau blajar ..heheheh

  8. saluuuuuuuuuut super sekalii pak thanks ya :angel

  9. ada source codenya mas? saya udah coba kok gabisa ya

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[+] kaskus emoticons nartzco