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

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Diagram dengan ChartJS di CodeIgniter 3

Last Updated on 24 July 2019 By tommy 2 Comments

Kali ini kita akan membuat grafik di CodeIgniter menggunakan data dari database. Tutorial ini singkat saja, agar mudah dipahami.

Database

Buat database baru dengan nama datapenduduk, lalu copy paste sql dibawah ini

--
-- Table structure for table `datapenduduk`
--
 
CREATE TABLE `datapenduduk` (
  `id` INT(11) NOT NULL,
  `provinsi` VARCHAR(50) NOT NULL,
  `jumlah` INT(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Dumping data for table `datapenduduk`
--
 
INSERT INTO `datapenduduk` (`id`, `provinsi`, `jumlah`) VALUES
(1, 'Aceh', 5189500),
(2, 'Bali', 4246500),
(3, 'Banten', 12448200),
(4, 'Bengkulu', 1934300),
(5, 'DI Yogyakarta', 3762200),
(6, 'DKI Jakarta', 10374200),
(7, 'Gorontalo', 1168200),
(8, 'Jambi', 3515000),
(9, 'Jawa Barat', 48037600),
(10, 'Jawa Tengah', 34257900),
(11, 'Jawa Timur', 39293000),
(12, 'Kalimantan Barat', 4932500),
(13, 'Kalimantan Selatan', 4119800),
(14, 'Kalimantan Tengah', 2605300),
(15, 'Kalimantan Timur', 3575400),
(16, 'Kalimantan Utara', 691100),
(17, 'Kepulauan Bangka Belitung', 1430900),
(18, 'Kepulauan Riau', 2082700),
(19, 'Lampung', 8289600),
(20, 'Maluku', 1744700),
(21, 'Maluku Utara', 1209300),
(22, 'Nusa Tenggara Barat', 4955600),
(23, 'Nusa Tenggara Timur', 5287300),
(24, 'Papua', 3265200),
(25, 'Papua Barat', 915400),
(26, 'Riau', 6657900),
(27, 'Sulawesi Barat', 1331000),
(28, 'Sulawesi Selatan', 8690300),
(29, 'Sulawesi Tengah', 2966300),
(30, 'Sulawesi Tenggara', 2602400),
(31, 'Sulawesi Utara', 2461000),
(32, 'Sumatera Barat', 5321500),
(33, 'Sumatera Selatan', 8267000),
(34, 'Sumatera Utara', 14262100);
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `datapenduduk`
--
ALTER TABLE `datapenduduk`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `datapenduduk`
--
ALTER TABLE `datapenduduk`
  MODIFY `id` INT(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=35;
COMMIT;

ingat untuk merubah konfigurasi database CodeIgniter di applications/config/database.php, contoh

'hostname' => 'localhost',
'username' => 'root',
'password' => 'gNqvky7HNuTi93WzxrFt',
'database' => 'datapenduduk',
'dbdriver' => 'mysqli',

Model

Buat model baru dengan nama Penduduk.php di folder application/models/

<?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 controller baru dengan nama PendudukController.php di folder application/controllers/

<?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 di folder application/views/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <title>CodeIgniter 3 ChartJS - Jaranguda.com</title>
  </head>
  <body>
 
  <div class="container">
    <canvas id="myChart"></canvas>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script type="text/javascript">
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
          <?php
            if (count($graph)>0) {
              foreach ($graph as $data) {
                echo "'" .$data->provinsi ."',";
              }
            }
          ?>
        ],
        datasets: [{
            label: 'Jumlah Penduduk',
            backgroundColor: '#ADD8E6',
            borderColor: '##93C3D2',
            data: [
              <?php
                if (count($graph)>0) {
                   foreach ($graph as $data) {
                    echo $data->jumlah . ", ";
                  }
                }
              ?>
            ]
        }]
    },
});
 
  </script>
  </body>
</html>

Screenshot

Buka http://localhost/PeopleController/index
1. Grafik Batang (Bar Chart)
codeigniter jumlah penduduk indonesia bar

untuk merubah jenis grafik, edit file view chart.php ubah bagian

type: 'bar',

contoh menjadi line

type: 'line',

codeigniter grafik jumlah penduduk indonesia line
untuk type lengkapnya bisa dilihat di chart type

Tulisan menarik lainnya

  • Membuat Form dengan Codeigniter

    Studi kasus kali ini adalah pembuatan form pendaftaran user di website. Database menggunakan MySQL. Buat…

  • Membuat Login Sederhana di CodeIgniter 3

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

  • Membuat Pencarian dengan CodeIgniter 3

    Script searching/pencarian ini adalah porting dari script Pencarian Laravel 5, jadi databasenya diambil dari sana…

  • Membuat Drop Down/Combobox di CodeIgniter

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

Filed Under: PHP

Reader Interactions

Comments

  1. Muhamad Excel Putra Perdana says

    25 April 2020 at 13:36

    kok saya object not found ya ? solusi

    Reply
  2. hends says

    11 February 2020 at 20:16

    nice gan, thanks ilmunya

    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 Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.2m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.2k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273k views
  • Cara Setting Wireless ZTE F609 Indihome 257.1k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.8k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.1k views
  • Cara Reset Password ZTE F609 Indihome 147.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.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