Scribd Logo
Unggah

Selamat datang di Scribd!

  • Chart

    Diunggah oleh

    Dzyl Yourbae
    23 tayangan5 halaman
    Dokumen tersebut memberikan penjelasan tentang cara membuat grafik menggunakan CodeIgniter dengan plugin Chart.js. Terdiri dari 3 bagian yaitu model untuk mengambil data jumlah mahasiswa per jurusan dari basis data, view untuk menampilkan grafik menggunakan Canvas dan Chart.js, serta controller untuk menghubungkan model dan view.

    Deskripsi Asli:

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut memberikan penjelasan tentang cara membuat grafik menggunakan CodeIgniter dengan plugin Chart.js. Terdiri dari 3 bagian yaitu model untuk mengambil data jumlah mahasiswa per jurusan dari basis data, view untuk menampilkan grafik menggunakan Canvas dan Chart.js, serta controller untuk menghubungkan model dan view.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    23 tayangan5 halaman

    Chart

    Diunggah oleh

    Dzyl Yourbae
    Dokumen tersebut memberikan penjelasan tentang cara membuat grafik menggunakan CodeIgniter dengan plugin Chart.js. Terdiri dari 3 bagian yaitu model untuk mengambil data jumlah mahasiswa per jurusan dari basis data, view untuk menampilkan grafik menggunakan Canvas dan Chart.js, serta controller untuk menghubungkan model dan view.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    Konfigurasi Pada MVC CodeIgniter

    1. Model

    <?php

    Class Model_mahasiswa extends CI_Model

    function Jum_mahasiswa_perjurusan()

    $this->db->group_by('jurusan');

    $this->db->select('jurusan');

    $this->db->select("count(*) as total");

    return $this->db->from('mahasiswa')

    ->get()

    ->result();

    ?>

    Pada bagian model disini saya membuat function Jum_mahasiswa_perjurusan() fungsinya untuk


    mengambil nilai agregat dari jumlah mahasiswa per jurusan. Perintah active record diatas sama saja
    dengan perintah sql dibawah ini:

    SELECT jurusan,COUNT(*) as 'total' FROM mahasiswa GROUP BY jurusan

    Dari data tersebut selanjutnya akan kita buatkan dalam bentuk grafik. Sekarang kita lanjut pada
    bagian view.

    2. View

    <!DOCTYPE html>
    <html>

    <head>

    <title>Cara Membuat Grafik dengan CodeIgniter dengan Chart.js</title>

    <!-- Load file plugin Chart.js -->

    <script src="<?php echo base_url()?>/assets/chart/Chart.js"></script>

    </head>

    <body>

    <br>

    <h4>Cara Membuat Grafik dengan CodeIgniter dengan Chart.js</h4>

    <canvas id="myChart"></canvas>

    <?php

    //Inisialisasi nilai variabel awal

    $nama_jurusan= "";

    $jumlah=null;

    foreach ($hasil as $item)

    $jur=$item->jurusan;

    $nama_jurusan .= "'$jur'". ", ";

    $jum=$item->total;

    $jumlah .= "$jum". ", ";

    ?>

    <script>

    var ctx = document.getElementById('myChart').getContext('2d');

    var chart = new Chart(ctx, {

    // The type of chart we want to create

    type: 'bar',

    // The data for our dataset

    data: {
    labels: [<?php echo $nama_jurusan; ?>],

    datasets: [{

    label:'Data Jurusan Mahasiswa ',

    backgroundColor: ['rgb(255, 99, 132)', 'rgba(56, 86, 255, 0.87)', 'rgb(60,

    179, 113)','rgb(175, 238, 239)'],

    borderColor: ['rgb(255, 99, 132)'],

    data: [<?php echo $jumlah; ?>]

    }]

    },

    // Configuration options go here

    options: {

    scales: {

    yAxes: [{

    ticks: {

    beginAtZero:true

    }]

    });

    </script>

    </body>

    </html>

    Dibagian view kita menampilkan grafiknya dengan plugin chart.js. Plugin tersebut saya load di
    bagian <head>.

    <script src="<?php echo base_url()?>/assets/chart/Chart.js"></script>

    Plugin chart.js saya simpan didalam folder assets/chart/ sesuaikan path nya sesuai dengan
    direktori yang kalian taru file Chart.js nya.
    Plugin akan ditampilkan pada bagian <canvas id=”myChart”></canvas>.
    Tag <canvas> merupakan tag yang baru diperkenalkan pada html versi ke 5, fungsinya untuk
    membuat gambar grafik.
    Chart yang kita gunakan disini adalah bar chart, bila ingin mengganti dengan jenis chart lain ganti
    nilai atribut type. Data jurusan akan ditampilkan menjadi label pada grafik tersebut. Untuk datanya
    sendiri nilainya di isi pada atribut data.
    3. Controller

    <?php

    defined('BASEPATH') OR exit('No direct script access allowed');

    class Mahasiswa extends CI_Controller {

    function __construct(){

    parent::__construct();

    $this->load->model('model_mahasiswa');

    function index()

    $data['hasil']=$this->model_mahasiswa->Jum_mahasiswa_perjurusan();

    $this->load->view('v_mahasiswa',$data);

    ?>

    Pada bagian controller kita hanya membuat 2 fungsi saja, yang pertama fungsi construct() untuk
    inisialisasi model mahasiswa.

    Fungsi utamanya sendiri adalah fungsi index dengan mengambil data dari function
    Jum_mahasiswa_perjurusan() dan disimpan pada variabel data dalam bentuk array, data tersebut
    kemudian di parsing ke view v_mahasiswa.

    Hasil Grafik dengan Codeigniter

    Bila kalian mengikuti langkah-langkah yang dijabarkan diatas maka hasilnya akan seperti gambar
    berikut:
    Kesimpulan
    Membuat grafik di codeigniter sangatlah mudah, yang diperlukan hanyalah plugin dari chart.js yang
    dapat didownload secara gratis (bersifat open source). Selain itu kita juga bisa membuat
    jenis/bentuk grafik yang lain dengan mudah. Untuk lebih lengkapnya baca pada situs resmi chart.js.
    Silahkan komentar dibawah ini apabila kalian ada pertanyaan.

    Anda mungkin juga menyukai