Cara mengimplementasikan google pie chart untuk visualisasi data dengan CodeIgniter. Masih seperti sebelumnya kita butuh data yang akan kita tampilkan dalam bentuk chart. Data yang saya gunakan adalah data dummy dari tabel Siswa.
 |
| Data dari table Siswa |
Model_google_pie_chart.php (MODEL)
<?phpclass Model_google_pie_chart extends CI_Model{public function get_data_siswa(){$query = "SELECT COUNT(*) AS total, tahun_lulus FROM tb_siswaGROUP BY tahun_lulus ORDER BY tahun_lulus DESC";$result = $this->db->query($query)->result_array();return $result;}}
Google_pie_chart.php (CONTROLLER)
<?phpdefined('BASEPATH') or exit('No direct script access allowed');class Google_pie_chart extends CI_Controller{public function __construct(){parent::__construct();$this->load->model('Model_google_pie_chart', 'Mchart');}public function index(){$data["title"] = "Membuat Chart dengan Google Pie Chart";$data["dataSiswa"] = $this->Mchart->get_data_siswa();$this->load->view("google_pie_chart", $data);}}
google_pie_chart.php (VIEW)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><?= $title; ?></title><!-- CDN Bootstrap --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"><!-- JS Google Chart --><script src="https://www.gstatic.com/charts/loader.js"></script></head><body><div class="container mt-3" style="width:600px"><h4><?= $title; ?></h4><br /><div id="piechart" style="width: 900px; height: 500px;"></div></div></body></html><script>google.charts.load('current', {'packages': ['corechart']});google.charts.setOnLoadCallback(drawChart);function drawChart() {var data = google.visualization.arrayToDataTable([['Tahun', 'Total'],<?phpforeach ($dataSiswa as $siswa) {echo "['" . $siswa['tahun_lulus'] . "'," . $siswa['total'] . "],";}?>]);var options = {title: 'Total Siswa Yang Lulus',is3D: true,};var chart = new google.visualization.PieChart(document.getElementById('piechart'));chart.draw(data, options);}</script>
Untuk menjalankan program silahkan ketik url berikut http://localhost/blog/google_pie_chart
DEMO PROGRAM
 |
| Output Program |
Semoga bermanfaat dude!!!
0 Komentar