Cara membuat Grafik dengan PHP dan MYSQL

Assalamualaikum, Wr.Wb

Oke pada kesempatan kali ini saya akan membahas tentang cara membuat grafik di PHP dengan bantuan Jquery yang bernama Jquery Hight Chart.

Sebenarnya ada banyak cara membuat chart atau diagram di PHP, salah satunya dengan Library/class php sendiri. Namun keliatannya lebih mudah menggunakan Jquery.

DEMO

 

Langsung saja tanpa banyak basa basi. anda Create Dulu tabel di mysql anda dengan data berikut ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CREATE TABLE IF NOT EXISTS `mahasiswa` (
`ID` int(10) NOT NULL AUTO_INCREMENT,
`nama` varchar(200) NOT NULL,
`jurusan` varchar(200) NOT NULL,
`email` varchar(200) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`ID`, `nama`, `jurusan`, `email`) VALUES
(4, 'Susilo rahmawati', 'TI', '[email protected]'),
(9, 'testoke', 'Akuntansi', 'testoke3'),
(10, 'okelah xx', 'Akuntansi', 'begituxx'),
(18, 'painem', 'TK', '[email protected]'),
(26, 'norman', 'TI', '[email protected]'),
(27, 'Hogna', 'TI', 'email2');

 

Nah setelah data terinput. anda buat satu folder di htdocs, beri saja nama diagram-pie. lalu buat index.php dan isi dengan kode berikut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Diagram Tanpa Database</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox',   90.0],
['IE',       26.8],
['Safari',    8.5],
['Opera',     6.2],
['Others',   0.7]
]
}]
});
});

</script>

</head>

<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

<a href="pie.php">Diagram yg menggunakan Database</a>

</body>
</html>

Nah dari Copy file diatas jika tidak ada kendala Browser maka Insyallah akan muncul tabel seperti ini

chart

NB : JIKA CHART TIDAK BERHASIL DI GENERATE, COBA GANTI BROWSER SELAIN FIREFOX, SEPERTI OPERA ATAU SAFARI ATAU CHROME, KARENA JQUERY TIDAK AKAN JALAN JIKA JAVASCRIPT PADA BROWSER TERSEBUT ANDA DISABLE ATAU NON AKTIF.

Nah jadi khan? mudah bukan? Anda pasti bertanya “Om itu khan manual merubah data dari Javascriptnya, terus bagaimana cara nya bisa bisa konek database?

Lalu saya akan menjawab, sebentar Mas, satu satu, saya akan beritahu bedanya. cara ini juga baru saya tahu belajar googling kesana kemari. Dulu saya juga sempat bingung, bagaimana cara mengakali nya, karena itu input format datanya menggunakan javascript. Sementara database dan bahasanya menggunakan PHP?

Jawaban mudahnya adalah Masukkan saja phpnya disisipkan ke dalam Javascript” Memang Bisa? Bisa, saya juga baru tahu 2 hari sebelum saya nulis ini tutorial. dulu setahu saya, javacritp lah yg bisa disisipkan kedalam PHP. Namun ternyata PHP juga bisa disisipkan kedalam Javascript. Masih bingung. Lihat tutprial selanjutnya saja.

Kita buat 1 file lagi beri nama koneksi.php dan isi dengan kode berikut:

1
2
3
4
5
6
7
8
<?php
$server ="localhost";
$username ="root";
$password ="";
$database ="kampus";
mysql_connect("$server","$username","$password")or die("Gagalx");
mysql_select_db("$database")or die("Database tidak ditemukan");
?>

File diatas adalah untuk koneksi dengan Mysqlnya, nanti kita include di diagramnya.

Oke selajutnya buat 1 file lagi bernama pie.php

lalu copy dengan code berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
session_start();

include "koneksi.php";

$sql = "SELECT jurusan, COUNT( ID ) AS qty FROM  `mahasiswa` GROUP BY jurusan";

$hasil = mysql_query($sql);

?>

<html>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false,
},
title: {
text: 'User Login Group By Kota'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
<?php

while($data=mysql_fetch_array($hasil))
{ ?>
['<?php echo $data[jurusan]?>',   <?php echo $data[qty]?>],

<?php
}//end while
?>
]
}]
});
});

</script>

</head>

<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</body>

</html>

 

Sepintas hampir sama, perbedaannya adalah, kita menambahkan sintax untuk query mysqlnya. dibagian ini

1
2
3
4
5
6
7
8
9
10
<?php
session_start();

include "koneksi.php";

$sql = "SELECT jurusan, COUNT( ID ) AS qty FROM  `mahasiswa` GROUP BY jurusan";

$hasil = mysql_query($sql);

?>

dan bagian ini untuk menampilakan datanya

1
2
3
4
5
6
7
8
9
<?php

while($data=mysql_fetch_array($hasil))
{ ?>
['<?php echo $data[jurusan]?>',   <?php echo $data[qty]?>],

<?php
}//end while
?>

Jadi jika database anda benar, query tidak ada masalah maka insyallah chart akan tampil seperti ini

chart-1Jadi query yg tadi adalah meng count ID / menghitung banyaknya mahasiswa yang memilih jurusan sama. / Group by jurusan.

Saya rasa sudah jelas dan anda bisa mencobanya sendiri di PC anda masing-masing. Bagi yg bingung anda bisa download langsung di link yg ada.

Download Source Code Mirror1

Download Source Code Mirror2

Berdasarkan Comment banyak sekali yang gagal dalam mencoba, ini bukan salah programnya, saya sudah mencoba puluhan kali, setiap user comment selalu saya coba lagi dan tetap jalan. Ini hanya disebabkan kekurang telitian saja.

Oke terima kasih sudah mampir ke Blog saya, jika anda merasa blog ini ada manfaatnya, mohon kiranya meninggalkan jejak atau sekedar Comment di kolom tersedia.

JIka tidak ya tidak apa-apa.

Wassalamualaikum.

 

 

50 thoughts on “Cara membuat Grafik dengan PHP dan MYSQL

  1. Hendri

    saya coba pelajari dulu gan… ada ccontoh lain lagi biar lebih banyak referensinya . misal yang line ataw multiple ….. but thx infonya…

    Reply
    1. septiyo Post author

      Contoh Lain? Mungking kalo googling Banyak Gan. 😀 setahu saya cara membuat Grafik di Web ada banyak selain dengan Javascript ada juga yang menggunakan Murni Class dari PHP. ada juga yang digenerate jadi File tipe .swf dulu ini menggunkan Flash. Jadi banyak jalan menuju ke Mekkah Gan.

      Kalau saya suka yg make Javascript ini mudah simple dan tanpa plugin yang aneh-aneh. kalau make Flash kadang suka gak jalan gara-gara browsernya tidak support.

      Reply
    1. septiyo Post author

      Kalau Blank biasanya ada beberapa sebab. BIsa jadi Data dari databasenya belum keluar Gan. COba Agan Check dulu datanya di echo keluar atua tidak?

      kalau udah keluar berarti tinggal di masalaha javacriptnya. bisa jadi pas penempatan php di javascript itu yang ada masalah Gan. memang harus detail alias teliti ngerjakannya.

      Reply
  2. RITA

    Master sy mau tanya . itu folder jquery nya dimana ya….
    saya coba yg tanpa database tapi hasilnya masih kosongan
    trims

    Reply
    1. septiyo Post author

      Halo, Mbak Rita, Folder Jquerynya Online, dan sourcenya ada di baris 6 – 8 jika anda buka di notepad ++

      Anda bisa download sendiri jika ingin bisa jalan di Online.

      Mungkin Dijalankan Kosong karena anda tidak lagi konek internet. kalao lagi Konek Insyallah Jalan.

      Barusan saya test. 😀

      Reply
  3. yuga

    om, beneran gak muncul grafik yg menggunakan database nya…. padahl saya udah download source code nya, saya udah bikin database berdasarkan file mahasiswa.sql (nama database = kampus, nama tabel = mahasiswa), saya juga udh bikin file koneksi.php supaya di include ke pie.php.
    tapi masih gak muncul 🙁 mohon pencerahan..

    Reply
    1. septiyo Post author

      Koneksi Apa udah bener Gan?

      Sebenarnya banyak penyebabnya kalau sampai tidak muncul
      1.Pastikan dulu data yang di load dari database sudah muncul, lalu Anda Echo biar kelihatan di monitor

      2.Setelah daabase tidak ada masalah, pastikan Javascriptnya tidak ada masalah(Kalau JAVASCRIPT itu kalau error atau salah, dia tidak mengeluarkan Show error. tidak seperti PHP, jadi yang ini harus teliti. Kalau kurang tanda kurung saja )} ]atau koma sudah tidak bisa jalan)

      pastikan dulu saja. kalau masih tidak bisa anda bisa kirim scrren shoot script anda ke email saya di [email protected] nanti insyallah saya bantu 😀

      Reply
  4. kenta

    gan, kok yang keluar blank, ane udah coba buka pake crome dan fire fox, tpi kok nggk nongol ya, tolong solusinya, ane udah copas berdasarkna tutorial pertama yang ada gambar pertama, tpi kok gambar table awal nya nggk nongol?

    Reply
    1. septiyo Post author

      Bisa Kok GAn. Agan habis Download ngejalaninnya Offline ya? karena source jquery hightcartnya online. Habis ni saya updatelah biar scriptnya offline. 😀

      Reply
  5. Putra

    Gan, saya mau nanya, sepertinya chart akan muncul kalau pc nya ONline internet ya ?, jika bisa offline mohon diinformasiin gan, terima kasih

    Reply
    1. septiyo Post author

      Sudah bs Offline gan, tinggal Agan download aja contohnya. di link saya. memang kemarin Source Jquerynya saya ambil CDN ONline, sekarnga sudah saya offlinekan. 😀

      Reply
  6. Jramdhoni

    pertanyaan saya mengapa ID nilai nya seperti itu ?
    bagaimana jika ID itu bersifat auto_increment ?

    Reply
    1. septiyo Post author

      ID yg mana maksud Agan? yg contoh untuk Database? namanya juga COntoh Gan.., itu saya Export saat database saya seadanya. Kalau mau increment ya increment aja tidak masalah. Toh saat create Tabel juga sudah di Set Increment Kan. 😀

      Reply
  7. ghani

    om,, ini kok yg menggunakan database hasilnya blank?udah coba pake opera, chrome ttep aja blank

    Reply
    1. septiyo Post author

      Kalo Blank itu biasanya ada kurang Teliti Gan. Misal. Tanda kurung buka ({) kurang kurung tutupnya (}), kurang tanda (;) dan lain sebagainya. Biasanya paling sering itu kurang kurung. itu aja sih. 😀

      Reply
  8. dian

    gan saya langsung pake database sama script punya agan ko tetep masih gak muncul yg dari database nya

    Reply
    1. septiyo Post author

      Yang gak jalan yang sebelah mananya Gan? bisa banyak penyebabnya, mungking nama dartabasenya beda, aganbisa set di file koneksi.php, agan bilang gak bisa ini sudah saya download lagi uploadtan saya dan saya test lagi, bisa jalan kok gan., coba cek n ricek lagi. semua Javascript nya juga sudah saya buat OFFlINE. 😀

      Reply
  9. wahyupm

    bagus banget gan postingan nya, singkat dan jelas. terimakasih gan infonya sangat membantu sekali. kunjung2 web ane yaa gan 🙂

    Reply
  10. Budiyanto

    Saya berhasil menampilkan grafik dengan database
    tadinya memang blank
    setelah saya pindah querynya di dalam javascript diatas while{$data=mysql_fetch_array($hasil)){
    }, grafiknya muncul.
    sayang scriptnya tidak bisa dipaste disini.
    Terima kasih Pak Septiyo.

    Reply
    1. septiyo Post author

      Oh Benarkah. Selamat Pak. Coba Scriptnya bisa dikirim kan ke emai saya saja, nanti saya Uploadkan kalo ini hasil revisi Anda.

      Karena team saya di kantor juga nemukan cara lain menggunakan JSON., jadi phpnya di Convert ke JSON dulu. BTW. Selamat 😀

      Reply
      1. septiyo Post author

        Bisa Gan 😀 saya udah menggunakan Cara diatas berkali-kali ditempat kerja. kadang kalau tidak bisa hanya ada 3 faktor
        #1.Brosernya perlu update

        #2.Kurang teliti penempatan antara tanda [‘]petik 1 dan [“]petik dua, karena javascript sangat Rewel menganai itu apalagi dipadukan sama php.

        #3.Gunakanlan Editor yg bagus. Bagus dalam arti lengkap tidak harus beli. Editor bagus sepert Netbean PHP atua Dream Weafer karena yg bagus akan memberi tahukan line tersebut error jika tanda petiknya salah atau kurang 😀

        Reply
  11. zaka

    maaf gan, untuk link nya apa masih hidup ? soalnya saya coba download duaduanya muncul keterangan “Sorry, the file that you requested is not valid. Sign error”..

    Reply
    1. septiyo Post author

      halo Gan,

      Bisa kok barusana saya buka linknya tidak ada maslah Gan. maaf baru sempat balas komen karena Kesibukan di tempat kerja. Maaaf Banget.

      Reply
  12. Eva

    malam saya ingin tanya2 banyak tentang pembuatan grafik menggunakan php ci, saya mohon kontak email saya. tks

    Reply
  13. Daniel

    Bang,udh aku cek dan donlod script dr abang tp kok ttep gak isa yg koneksi database ya… mohon pencerahannya dong bang…

    Reply
    1. septiyo Post author

      Yang, gak pake koneksi Jalan? kalau jalan biasanya Hanya masalah koneksi atau kalau nggak masalah browser nya Gan. Bisa di cek dulu koneksinya ke database mysql bisa atau tidak?

      Reply
  14. kasdin

    Gan,, cara donloadnya gimana nih, udah aku klik miro1 dan dua tapi setelah di unduk kok gak bisa??
    mohon bantuanya gan. makasih

    Reply
    1. septiyo Post author

      Saya sudah Coba semua Gan. Mirror1 dan Mirror 2 bisa semua Downloadnya. Mungkin Tempat download anda 4shared diblock Proxy. biasanya dikampus2, kantor dan lain 4shared di block. sekarang google pun juga tidak bersahabat dengan 4shared.

      tapi over All bisa kok saya download.

      Reply
  15. David

    Hallo bang septiyo, saya mau nanya nih. Saya sudah download dan dijalankan untuk bagian yang tanpa db nya bisa muncul diagram pie nya. Tapi yang memakai db tidak jalan (blank). Bisa minta bantuannya? Soalnya lagi butuh menampilkan diagram dengan db nih bang. Trims

    Reply
    1. septiyo Post author

      Halo Gan David,

      Bisa dicoba ganti Broser. Recomended Firefox, Opera , atau Chrome.

      Dan Semua Broser harus dipastikan dulu sudah Update yang terbaru. KArena itu sangat berpengaruh. 😀

      Reply
  16. bud

    gan ko saya sudah coba dibeberapa browser, hasilnya tetap saja blank (yang menggunakan database)
    mohon pencerahannnya gan

    Reply
    1. septiyo Post author

      Maaf ini baru ada waktu buat Bales

      Biasanya Gan kalau Blank di PHP/javascript itu hanya 1 sebabnya, tanda kurung pasangannya salah atau kurang Pas. Pasti itu.

      Misal agan tanda kurung awal ( pasangannya tidak ada, atau {[ pasangannya salah pasti jadinya Blank kalau PHP

      kalau javasctript biasanya dia muncul tapi efecnya tidak jalan. hanaya itu.

      Paling enak Agan make Editor kya Netbeanst PHP atau DreamWeaver deh, karena kalau salah linenya keliatan ada Errornya, kalau Notepad ++ biasa walau ada pasannya Tagnya tapi dia gk keliatan kalau itu Error.

      Dicoba lagi gan tapi make Editor Netbeans sangat Membantu

      Penglaman saya sih, kalau bioasanya suka make Notepad ++ dan dateng Error yg gak bisa jalan, saya akana make Netbean dulu baru setelah Error Fix, make Notepad ++ lagi gak papa.

      Semoga Berhasil 😀

      Reply

Leave a Reply

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