Simple Pie Chart Google API Dengan PHP MYSQLi


Simple Pie Chart Google API Dengan PHP MYSQLi

Assalamualaikum Wr. Wb.
Selamat siang semua, cukup panas ya siang ini cocok bacanya sambil es selendang mayang.. mantep hehe
Dalam artikel kali ini saya akan membahas cara membuat simple pie chart dengan google chart api dan tentu dengan php dan database ya, disini kita menggunakan ekstensi mysqli. gimana caranya? nah, langsung aja yuk simak tutorialnya

Pertama buat dulu tabel SQL nya dengan kode berikut

CREATE TABLE IF NOT EXISTS `tabelme` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` varchar(50) NOT NULL,  
  `address` text NOT NULL,  
  `gender` varchar(10) NOT NULL,  
  `designation` varchar(100) NOT NULL,  
  `age` int(11) NOT NULL,  
  `image` varchar(100) NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

 

Selanjutnya tinggal kita buat pie chartnya dengan kode php dan html berikut

<?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 $query = "SELECT gender, count(*) as number FROM tabelme GROUP BY gender";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Just Demo from ERLLANG.ga</title>  
           <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()  
           {  
                var data = google.visualization.arrayToDataTable([  
                          ['Gender', 'Number'],  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                               echo "['".$row["gender"]."', ".$row["number"]."],";  
                          }  
                          ?>  
                     ]);  
                var options = {  
                      title: 'Percentage of Male and Female',  
                      //is3D:true,  
                      pieHole: 0.4  
                     };  
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
                chart.draw(data, options);  
           }  
           </script>  
      </head>  
      <body>  
           <br /><br />  
           <div style="width:900px;">  
                <h3 align="center">Make Simple Pie Chart Google API with PHP Mysqli</h3>  
                <br />  
                <div id="piechart" style="width: 900px; height: 500px;"></div>  
           </div>  
      </body>  
 </html>  

 

Maka akan menjadi seperti ini pie chart nya

 

Nah, begitulah tutorialnya.. silahkan dipraktekan ya :) selamat mencoba!

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/ceIQt

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Simple Pie Chart Google API Dengan PHP MYSQLi