Dunia Telekomunikasi, dan Komputer: Chart Google Connect database via PHP JSON

Membuat Chart atau Grafik dengan PHP dan MySQL. Malam sobat tutorialweb, kali ini saya akan sharing bagaimana cara membuat chart atau grafik dengan PHP dan MySQL. Kali ini saya akan membuat chart pie atau grafik lingkaran, dan menggunakan API dari Google Chart. Kalau pengen tahu dulu dimana bisa melihat alamat google chart bisa di https://developers.google.com/chart/
Sebenarnya google chart sendiri tidak hanya menyediakan grafik lingkaran saja, tapi menyediakan banyak sekali pilihan grafik yang bisa sobat gunakan, seperti grafik batang, silinter, garis dan jenis grafik lainnya yang tentunya bisa di kombinasikan dengan PHP dan MySQL untuk data yang ingin dimasukkan di grafik tersebut.
Lihat dokumentasinya di https://developers.google.com/chart/interactive/docs/
Langsung saja ke demo ya sob, kali ini saya akan membuat grafik lingkaran dengan data kelas, dimana kelas ini nantinya ada nama kelas dan jumlah siswa tiap kelas tersebut. Jadi intinya nanti yang ditampilkan adalah Nama kelas dan jumlah siswa perkelas. Tentunya data kelas ini dari database ya sob.
Ini contoh yang akan kita buat sob

Yuk kita mulai, pertama buat dulu databasenya. Dalam kasus ini saya buat database dengan nama tutorialweb_google_chart, kemudian silahkan dump script di bawah ini untuk mendapatkan tabel dengan nama kelas beserta kolom-kolomnya. Berikut ini kodenya:

CREATE TABLE `kelas` (
  `id` int(11) NOT NULL,
  `kelas` varchar(20) NOT NULL,
  `jumlah_siswa` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `kelas` (`id`, `kelas`, `jumlah_siswa`) VALUES
(1, 'Kelas X', 45),
(2, 'Kelas XI', 60),
(3, 'Kelas XII', 20);

ALTER TABLE `kelas`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `kelas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

CREATE TABLE `kelas` (

`id` int(11) NOT NULL,

`kelas` varchar(20) NOT NULL,

`jumlah_siswa` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `kelas` (`id`, `kelas`, `jumlah_siswa`) VALUES

(1, 'Kelas X', 45),

(2, 'Kelas XI', 60),

(3, 'Kelas XII', 20);

ALTER TABLE `kelas`

ADD PRIMARY KEY (`id`);

ALTER TABLE `kelas`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

Cek ya sob apakah sudah ada tabel kelasnya, jika ada masalah silahkan komentar di bawah.
Lanjut silahkan buat folder baru di server lokal sobat, namanya bebas yang penting ada namanya aja
Kemudian buat file dengan nama index.php, dan tuliskan kode di bawah ini:

<?php
//koneksi ke database
$conn = new mysqli("localhost", "root", "", "tutorialweb_google_chart");
if ($conn->connect_errno) {
    echo die("Failed to connect to MySQL: " . $conn->connect_error);
}

$rows = array();
$table = array();
$table['cols'] = array(
 //membuat label untuk nama nya, tipe string
 array('label' => 'Kelas', 'type' => 'string'),
 //membuat label untuk jumlah siswa, tipe harus number untuk kalkulasi persentasenya
 array('label' => 'Jumlah siswa', 'type' => 'number')
);

//melakukan query ke database select
$sql = $conn->query("SELECT * FROM kelas");
//perulangan untuk menampilkan data dari database
while($data = $sql->fetch_assoc()){
 //membuat array
 $temp = array();
 //memasukkan data pertama yaitu nama kelasnya
 $temp[] = array('v' => (string)$data['kelas']);
 //memasukkan data kedua yaitu jumlah siswanya
 $temp[] = array('v' => (int)$data['jumlah_siswa']);
 //memasukkan data diatas ke dalam array $rows
 $rows[] = array('c' => $temp);
}

//memasukkan array $rows dalam variabel $table
$table['rows'] = $rows;
//mengeluarkan data dengan json_encode. silahkan di echo kalau ingin menampilkan data nya
$jsonTable = json_encode($table);

?>
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);

 function drawChart() {

  // membuat data chart dari json yang sudah ada di atas
  var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

  // Set options, bisa anda rubah
  var options = {'title':'Data siswa',
        'width':500,
        'height':400};

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
 }
    </script>
</head>
<body>
    
 <!--Div yang akan menampilkan chart-->
    <div id="chart_div">
</div>
</body>
</html>

<?php

//koneksi ke database

$conn = new mysqli("localhost", "root", "", "tutorialweb_google_chart");

if ($conn->connect_errno) {

echo die("Failed to connect to MySQL: " . $conn->connect_error);

}

$rows = array();

$table = array();

$table['cols'] = array(

//membuat label untuk nama nya, tipe string

array('label' => 'Kelas', 'type' => 'string'),

//membuat label untuk jumlah siswa, tipe harus number untuk kalkulasi persentasenya

array('label' => 'Jumlah siswa', 'type' => 'number')

);

//melakukan query ke database select

$sql = $conn->query("SELECT * FROM kelas");

//perulangan untuk menampilkan data dari database

while($data = $sql->fetch_assoc()){

//membuat array

$temp = array();

//memasukkan data pertama yaitu nama kelasnya

$temp[] = array('v' => (string)$data['kelas']);

//memasukkan data kedua yaitu jumlah siswanya

$temp[] = array('v' => (int)$data['jumlah_siswa']);

//memasukkan data diatas ke dalam array $rows

$rows[] = array('c' => $temp);

}

//memasukkan array $rows dalam variabel $table

$table['rows'] = $rows;

//mengeluarkan data dengan json_encode. silahkan di echo kalau ingin menampilkan data nya

$jsonTable = json_encode($table);

<html>

<head>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

// membuat data chart dari json yang sudah ada di atas

var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

// Set options, bisa anda rubah

var options = {'title':'Data siswa',

'width':500,

'height':400};

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Jika sudah silahkan simpan, dan coba buka di browser sobat, alamatnya ini sob: localhost/folder_sobat
Jangan salah ya sob, soalnya banyak yang buka nya itu hanya di klik dua kali pada file index.php nya, jadi gak jalan deh.
Seperti dilihat pada kode diatas, disana saya memasukkan API Google Chart dengan source yang online, jadi kalau pengen berhasil ya harus online dulu sobat. Atau bisa download dulu source nya.
Nah, sudah selesai sob, kalau ada error, grafik tidak tampil, atau yang lainnya silahkan tinggalkan komentar di bawah. Jangan lupa selalu kunjungi tutorialweb untuk tutorial pemrograman web terbaru.

Dunia Telekomunikasi, dan Komputer

Feedburner

Minggu, 06 Agustus 2017

Chart Google Connect database via PHP JSON

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Arsip Blog