• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Diagram di CodeIgniter 3

Last Updated on 24 July 2019 By tommy 11 Comments

Contoh data yang akan ditampilkan adalah jumlah penduduk di beberapa provinsi Indonesia. Untuk menampilkan diagramnya kita akan menggunakan bantuan highcharts

Buat tabel baru di database anda dengan nama jumlah penduduk, lalu tambah beberapa data ke dalam tabel datapenduduk

INSERT INTO `datapenduduk` (`provinsi`, `jumlah`) VALUES
('Aceh', 3930905),
('DIY', 3450000),
('Jambi', 2413846),
('Riau', 4957627),
('Sumatera Barat', 4248931),
('Sumatera Utara', 11649655);

Model

Buat model dengan nama Penduduk.php

<?php
// Penduduk.php
class Penduduk extends CI_Model {
	public function __construct()
	{
		$this->load->database();
	}
 
	public function graph()
	{
		$data = $this->db->query("SELECT * from datapenduduk");
		return $data->result();
	}
 
}

Controller

Buat contoller baru dengan nama PendudukController.php

 
<?php
class PendudukController extends CI_Controller {
 
	public function __construct()
	{
		parent::__construct();
		$this->load->model('penduduk');
	}
 
	public function index()
	{
		$data['graph'] = $this->penduduk->graph();
		$this->load->view('chart', $data);
	}
 
}

View

Buat view baru dengan nama chart.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Data Penduduk Indonesia - Jaranguda.com</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
 
$(function () {
	$('#container').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: 'Data Penduduk Indonesia'
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: 'Persentase Penduduk',
			data: [
					<?php 
					// data yang diambil dari database
					if(count($graph)>0)
					{
					   foreach ($graph as $data) {
					   echo "['" .$data->provinsi . "'," . $data->jumlah ."],\n";
					   }
					}
					?>
			]
		}]
	});
});
 
</script>
</head>
<body>
 
<div id="container"></div>
 
</body>
</html>

Screenshot

Buka url http://localhost/PendudukController/index
data penduduk indonesia php

tunggu seri Belajar CodeIgniter 3 selanjutnya.

Last Updated on 24 July 2019 by tommy

Tulisan menarik lainnya

  • Membuat Diagram Google Chart dengan PHP MySQL

    Ditutorial kali ini kita akan menggunakan data penduduk Indonesia pada tahun 2010 sebagai contoh. Yang…

  • Membuat Login Sederhana di CodeIgniter 3

    Cara ini sangat-sangat sederhana, gunakan hanya untuk pembelajaran. Kekurangan login ini sangat banyak 1. Tidak…

  • Membuat Pagination di CodeIgniter 3

    Pertama kita akan membuat data dummy/data contoh untuk mempermudah pembelajaran ini. Dari CLI MySQL atau…

  • Membuat Drop Down/Combobox di CodeIgniter

    Membuat Combobox atau Drop Down box di CodeIgniter sungguh mudah, fleksibel dan cepat. Pertama kita…

Filed Under: PHP Tagged With: Belajar CodeIgniter 3, Chart, grafik

Reader Interactions

Comments

  1. Rizki Cahyadi says

    12 May 2019 at 01:51

    Mantab mas tutorial nya tidak ada kendala sama sekali pasti langsung bisa terima kasih.

    Reply
  2. Tanaya Motic says

    9 May 2019 at 01:59

    chartnya ga kepanggil/ ga muncul

    Reply
  3. Tanaya Motic says

    27 April 2019 at 21:49

    Kak, saya udah nyoba sesuai yang dicontohin. Tapi kenapa ngga bisa muncul yah chartnya?

    Reply
    • tommy says

      29 April 2019 at 10:17

      Coba dilihat log errornya, apa yang muncul?

      Reply
      • Tanaya Motic says

        30 April 2019 at 04:53

        ga ada erornya kak, tapi ga muncul

        Reply
        • tommy says

          30 April 2019 at 16:04

          emang cek errornya bagaimana? sampe ngga muncul?

          Reply
  4. Susantokun says

    20 May 2018 at 15:23

    Terima kasih banyak broooo :D

    Reply
  5. Anita Rahmawati says

    17 July 2017 at 11:51

    Boleh lihat code view chart nya? karena tidak tampil di layar.
    Terimakasih

    Reply
    • tommy says

      17 July 2017 at 12:57

      udah dibenerin :)

      Reply
  6. aswin says

    11 January 2017 at 14:24

    mantap bro, nggak ada error, lngsung jadi
    tinggal dikembangin nih.
    terbaiks

    Reply
  7. hanns says

    10 December 2015 at 15:37

    terima kasih mas bro…. :thumbup

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Cara Buat atau Update UID User Docker Image
  • Solusi helm Upgrade Failed
  • macOS package is untrusted
  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS

Komentar

  • Iqu on Review ISP Fiber Optik Balifiber
  • Sarah on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rizcky on Kemana Menghilangnya Saldo BCA 50 ribu
  • Mubashar sadiq on Password Superadmin Huawei HG8245A
  • Beritalogi on Cara Redirect Domain di Cloudflare

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.3m views
  • Password Terbaru ZTE F609 Indihome 786k views
  • Password Superadmin Huawei HG8245A 330.5k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 275.5k views
  • Cara Setting Wireless ZTE F609 Indihome 260.4k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 172.2k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 162.1k views
  • Akses UseeTV Indihome via Wireless ZTE F609 157.5k views
  • Cara Reset Password ZTE F609 Indihome 148.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 115.5k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
carakami.com
kuotabisa.com
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java