Cara membuat Grafik dengan PHP dan MYSQL

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

[code type=sql]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’, ‘xxxsusilo@yahoo.com’),
(9, ‘testoke’, ‘Akuntansi’, ‘testoke3’),
(10, ‘okelah xx’, ‘Akuntansi’, ‘begituxx’),
(18, ‘painem’, ‘TK’, ‘Email@Emal.com’),
(26, ‘norman’, ‘TI’, ’email@emal.com’),
(27, ‘Hogna’, ‘TI’, ’email2′);[/code]

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

[code type=php]<!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>[/code]

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:

[code type=php]<?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”);
?>[/code]

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:

[code type=php]<?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>[/code]

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

[code type=php]<?php
session_start();

include “koneksi.php”;

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

$hasil = mysql_query($sql);

?>[/code]

dan bagian ini untuk menampilakan datanya

[code type=php]<?php

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

<?php
}//end while
?>

[/code]

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. saya coba pelajari dulu gan… ada ccontoh lain lagi biar lebih banyak referensinya . misal yang line ataw multiple ….. but thx infonya…

    1. 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.

    1. 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.

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

    1. 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. 😀

  3. 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..

    1. 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 septiyou@gmail.com nanti insyallah saya bantu 😀

  4. 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?

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

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

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

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

    1. 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. 😀

    1. 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. 😀

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

    1. 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. 😀

  8. 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.

    1. 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 😀

      1. 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 😀

  9. 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”..

    1. halo Gan,

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

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

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

    1. 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?

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

    1. 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.

  13. 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

    1. 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. 😀

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

    1. 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 😀

Leave a Reply

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