Cara mudah membuat pie chart atau diagram lingkaran dengan php dan jsapi

Seringkali kita melihat data yang ditampilkan dalam bentuk diagram lingkaran seperti kue pia atau yang biasa kita kenal dengan pie chart. Dalam tutorial kali ini kami mencoba menyajikan langkah - langkah mudah yang berhubungan dengan pembuatan diagram lingkaran / pie chart

Pie chart dapat kita buat dengan mudah, yaitu dengan memanfaatkan JSAPI dari GOOGLE yang bisa tarik ke website kita, sehingga kita tidak perlu lagi melakukan banyak coding dalam pebuatannya. Dengan menggunakan JSAPI Google, kita hanya perlu menyediakan data yang akan kita tampilkan dalam bentuk diagram, tentunya data tersebut harus disusun sesuai format dari JSAPI yang sudah ditentukan oleh Google

 

Berikut adalah contoh kode diagram statis yang disediakan oleh Google

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        //==============Format Data==================
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
        //==============Format Data==================
		
        // Set chart options
        //==============Setting Chart================
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        //==============Setting Chart================

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Perhatikan pada bagian yang sudah saya berikan tanda:
//==============Setting Chart================ dan
//==============Format Data==================
Pada bagian tersebutlah kita harus melakukan Modifikasi sesuai dengan data yang akan kita ambilkan dari database.

Dalam contoh berikut kami akan menampilkan statistik kunjungan website Media Kreatif selamat tahun 2012 yang sudah kami catat pada pada sys_traffic yang memiliki dua kolom, yaitu Tanggal dan Jumlah. Setelah kita melakukan modifikasi , script diatas akan terlihat seperti pada contoh dibawah ini :

<?php
	//Buat koneksi ke database
	$db_conn = mysql_connect('localhost', 'root', 'kutukupret');
	$db_sell = mysql_select_db('tutorial',$db_conn);
	
	//title yang akan dijadikan judul chart
	$title   = 'Statistik pengunjung website Media Kreatif Pada Tahun 2012';
	
	//Buat query untuk melihat data kunjungan bulanan pada tahun 2012
	$query   = mysql_query('select sum(Jumlah) as Kunjungan,left(Tanggal,7) as Bulan from sys_traffic where left(Tanggal,4)="2012" group by left(Tanggal,7)');
	
	while($res = mysql_fetch_array($query)){
		$bulan = $res['Bulan'];
		$jumlah= $res['Kunjungan'];
		//Membuat susunan data sesuai format JSAPI
		$data .= '["'.$bulan.'",'.$jumlah.'],'; 
	}
	//membuang tanda koma di akhir data
	$data = substr($data,0,(strlen($data)-1));
?>
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="jsapi.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
       //==============Format Data==================
        data.addRows([
          <?php echo $data; ?>
        ]);
        //==============Format Data==================
		
        // Set chart options
        //==============Setting Chart================
        var options = {'title':'<?php echo $title; ?>',
                       'width':600,
                       'height':400};
        //==============Setting Chart================
		
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Pada contoh diatas, hanya sedikit bagian yang kita lakukan perubahan. Yang terpenting dalam hal ini adalah kita harus memahami bagaimana caranya supaya kita bisa membuat susunan data seperti yang ditentukan oleh JSAPI. Susunan datanya saya buat dengan menggunakan PHP seperti pada script dengan komentar

//Membuat susunan data sesuai format JSAPI

Catatan penting :
Untuk menggunakan script ini, pastikan komputer kita terkoneksi ke Internet, karena JSAPI memerlukan file - file tambahan yang terletak pada Server Google bukan berada pada komputer lokal.

 


Download contoh script piecart

Jika ada hal - hal yang kurang dimengerti dari modifikasi script diatas, silahkan tuliskan komentar atau pertanyaan anda pada form dibawah ini. Selamat Mencoba dan Salam Kreatif ;)


Komentar pembaca

DeanTerimakasih gan tutorialnya bermanfaat sekali :). Ada yang mau saya tanyain gan, bisa ga nentuin warna diagram nya sendiri ?posting pada :2013-10-07 15:17:57

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar