» Berlangganan Artikel



» Polling Pembaca

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

» Statistik Pengunjung

Today
Yesterday
All visitor

» Kategori Artikel

PHPMySQLHTML / XHTMLCorelDRAWCSSUbuntuCodeIgniterAJAXOffice

» Arsip Artikel


» Facebook Media Kreatif


Cara mudah membuat column chart atau diagram kolom dengan php mysql dan jsapi

Seringkali kita melihat data yang ditampilkan dalam bentuk diagram berbentuk kolom atau yang biasa kita kenal dengan nama column chart. Dalam tutorial kali ini kami mencoba menyajikan langkah - langkah mudah yang berhubungan dengan pembuatan column chart

 

Seperti halnya piie chart, column chart juga 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 column chart statis yang disediakan oleh Google

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
	  //==================Format Data======================
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
	  //==================Format Data======================
	  
	  //==================Setting Chart====================
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };
      //==================Setting Chart====================
	  
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></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'];
		$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">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Visitor'],
          <?php echo $data;?>
        ]);

        var options = {
          title: '',
          hAxis: {title: 'Month Periode', titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the column chart-->
    <div id="chart_div" style="width:300px; height:300px;"></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 columnchart

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

Dedi AlnasGan bisa mnt tabel dan databasenya kirim ke email alnas.dedi@yahoo.com, tks yaposting pada :2013-07-31 15:20:08
AdminSdr Dedi, Pada link download contoh script diatas sudah saya sertakan semua, struktur database dan scriptnya. http://media-kreatif.com/download/tutorial/script_columnchart_jsapi.zipposting pada :2013-08-01 10:08:05

Tulis komentar

 
© media kreatif - 2009 » 2014