Cara menggunakan diagram lingkaran html

Bagi sobat yang ingin membuat Pie Chart dengan Google Chart API di website juga bisa. Karena google menyediakan chart yang bisa kita gunakan untuk keperluan website kita. Bagan ini gratis dan dapat digunakan kapan saja tanpa harus membayarnya. Sangat powerfull dimana kita bisa menyesuaikan bentuk grafik, kita juga bisa mengontrol data yang ingin kita tampilkan agar interaktif, membuat data dengan dinamika yang berbeda dan mudah digunakan. Google chart juga memiliki banyak variasi jenis chart seperti terlihat pada gambar di bawah ini

Langkah pertama siapkan dulu tabel database yang sudah berisi data atau bisa copy script dibawah ini untuk membuat databasenya

BUAT TABEL JIKA TIDAK ADA `karyawan` (

`id` int(11) BUKAN NULL AUTO_INCREMENT,

`nama` varchar(50) BUKAN NULL,

`sex_type` varchar(10) BUKAN NULL,

`umur` int(11) BUKAN NULL,

KUNCI UTAMA (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ;

--

-- Membuang data untuk tabel `karyawan`

--

INSERT INTO `employee` (`id`, `name`, `sex_type`, `age`) NILAI

(1, 'Shelli', 'perempuan', '25'),

(2, 'Bartho', 'lelaki', '30'),

(3, 'Irwan', 'laki-laki', '27'),

(4, 'Fatimah', 'wanita', '23'),

(5, 'Nita', 'perempuan', '25'),

(6, 'Shari', 'wanita', '23');

Jika sudah maka kita akan membuat perintah sql di php untuk mengambil data dengan cara mengelompokkan lalu kita akan loop pada fungsi drawChart() kemudian menampilkannya di div seperti script di bawah ini

$koneksi = mysqli_connect("localhost", "dumet", "school", "test");

$query = "PILIH jenis_jenis kelamin, hitung(*) sebagai total DARI GROUP karyawan berdasarkan jenis_jenis kelamin";

$hasil = mysqli_query($koneksi, $query);

?>

  

  

       

          

Cara Membuat Pie Chart Dengan Google Chart API

           

           

       

     

          

 

               

Cara Membuat Pie Chart Dengan Google Chart API

 

               

 

          

 

       

 

Jika Anda membukanya di browser Anda, maka akan terlihat seperti gambar di bawah ini

Berikut artikel cara membuat Pie Chart Dengan Google Chart API. Semoga bermanfaat dan selamat mencoba

Pada tutorial sebelumnya tentang pembuatan grafik dari database, kita telah membahas pembuatan diagram batang menggunakan library highchart. Dalam hal ini data diambil dari database

Seperti yang sudah disebutkan di tutorial sebelumnya, jenis grafik di library highchart sangat beragam. Salah satu grafik yang sering digunakan adalah Pie Chart atau biasa kita sebut grafik lingkaran. Grafik ini sering digunakan untuk menampilkan data dalam bentuk persentase

Studi kasus yang diangkat dalam pembuatan pie chart sama dengan tutorial sebelumnya yaitu tentang statistik pengguna browser seperti terlihat pada gambar. 1 di bawah
(Gambar. 1)
Seperti yang terlihat pada gambar. 1, kami memiliki lima jenis browser (Chrome, Firefox, Safari, Opera, Konqueror) yang ditampilkan dalam bentuk persentase. Data diambil dari sisi database

Untuk tata letak antarmuka Bootstrap digunakan dan untuk pustaka grafik seperti yang disebutkan di atas digunakan highchart dengan tipe grafik bulat

Langkah langkah

1. Buat basis data
Beri nama database dengan nama. dbgraph, dimana databasenya memiliki tiga field dan data seperti script sql dibawah ini
CREATE TABLE IF NOT EXISTS `browser` ( `id` int(11) NOT NULL AUTO_INCREMENT, `browsername` varchar(30) NOT NULL, `total` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; INSERT INTO `browser` (`id`, `browsername`, `total`) VALUES (1, 'Chrome', 50), (2, 'Firefox', 25), (3, 'Safari', 15), (4, 'Opera', 5), (5, 'Konqueror', 5);
2. Buat koneksi file. php
File ini bertujuan untuk membangun database, disini kita menggunakan ekstensi mysqli sehubungan dengan ekstensi mysql telah dihapus di PHP 7 dan sudah tidak digunakan lagi di versi PHP di bawah 7
<?php $con=mysqli_connect("localhost","root","","dbgraph"); ?>_
3. Memanggil perpustakaan highchart. js
Agar nantinya data dari database dapat ditampilkan dalam bentuk grafik lingkaran, maka harus dipastikan sudah memiliki library highchart. Anda dapat menemukannya di tautan unduhan di bagian bawah

Dalam tutorial ini, diasumsikan bahwa file tersebut ada di dalam folder. aset/js/grafik tinggi. js
<script src="assets/js/highcharts.js"></script>
4. Pengaturan properti grafis dan pengambilan data dari database
Agar grafik kita ditampilkan dalam bentuk diagram lingkaran, itu harus diatur menjadi lingkaran di bagian tipe. Jika ingin data berupa persentase dengan koma, bisa diatur dengan Highcharts.numberFormat(this.percentage, 2) &nbsp; pada bagian label plotOptions

Selain itu kita perlu mendefinisikan unique id pada bagian  renderTo: 'mygraph', disini unique id adalah mygraph, yang nantinya akan dipanggil pada tag <bod></body>. Selain mendefinisikan properti, kami juga mengambil data dari database
<script> var chart; $(document).ready(function() { chart = new Highcharts.Chart( { chart: { renderTo: 'mygraph', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Internet Browser Statistics ' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' % '; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: 'green', formatter: function() { return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' % '; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [ <?php include "connection.php"; $query = mysqli_query($con,"SELECT browsername from browser"); while ($row = mysqli_fetch_array($query)) { $browsername = $row['browsername']; $data = mysqli_fetch_array(mysqli_query($con,"SELECT total from browser where browsername='$browsername'")); $jumlah = $data['total']; ?> [ '<?php echo $browsername ?>', <?php echo $jumlah; ?> ], <?php } ?> ] }] }); }); </script>
Jika melihat grafik lingkaran yang ditampilkan tanpa koma, berarti nilai masing-masing browser setelah dibagi dengan total nilai browser dikalikan 100% memang merupakan nilai bulat tanpa pecahan

Misalkan Anda memiliki data statistik berikut dalam database
idBrowsernameTotal1Chrome502Firefox253Safari154Opera55Konqueror50
Jumlah total dari total field adalah 145 dari penjumlahan 50 + 25 + 15 + 5 + 50. Untuk data Chrome yang ditampilkan dengan metode penghitungan, 50/145 * 100% = 34. 48%. Jadi disini kita tidak perlu mengatur tipe data floating point untuk nilainya

Proses perhitungan dilakukan secara otomatis oleh library highchart. js. Dalam contoh ini perhitungan tidak menghasilkan angka desimal

5. Buat id unik untuk dirender
Tempatkan id unik yang Anda buat pada langkah 4 di bagian  renderTo di bagian tag <?php $con=mysqli_connect("localhost","root","","dbgraph"); ?>0<?php $con=mysqli_connect("localhost","root","","dbgraph"); ?>1

Karena pada contoh ini kita menggunakan Bootstrap, maka id uniknya adalah sebagai berikut
<div class="panel panel-primary"> <div class="panel-heading">The Graph of Browser Trends January 2015</div> <div class="panel-body"> <div id ="mygraph"></div> </div> </div>_
Silahkan klik link download untuk mendapatkan source code secara keseluruhan, sudah termasuk library highchart. js dan bootstrap library dan database agar tampilan seperti gambar. 1 di atas

Unduh Pratinjau Langsung