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

DheJheKlo misalnya di CI itu kan ditampilkan pada view. bisa gak chart tersebut di tampilkan ke dalam table. maksudnya saya membuat view dimana ada side kiri dan kanan. side kiri saya pake untuk menu dan yg kanan untuk content isi. Misalnya saya klik untuk menu presentase kehadiran maka chart tersebut muncul di content isi, bukan meload view chart tersebut. posting pada :2014-05-23 18:13:18
adminBisa bisa saja dilakukan seperti itu. Silahkan coba cek hasil polling kami pada alamat http://ubi-prob.com . Apakah yang anda maksud seperti itu?posting pada :2014-05-23 19:46:28
dancokMembuat Diagram Lingkaran Database MySQL <a href="http://helmykkediricomp.blogspot.co.id/2016/02/membuat-diagram-lingkaran-database-mysql.html"> >> Klik Disini << </a> posting pada :2016-02-04 06:59:29