Visualiasi dengan file format json menggunakan Codeigniter, Uikit, dan Google Charts - GawaUntung/tugasvisual GitHub Wiki

Untuk clonning bisa diakses melalui link cloning (klik)

hasil

Langkah awal yang kita lakukan adalah menginstall XAMP tentunya setelah itu baru install Codeigniter, Uikit, dan Google Charts

Instalasi Codeigniter

Codeigniter merupakan perangkat lunak dengan sumber daya terbuka (open source) yang dapat digunakan oleh pengembang dalam membangun aplikasi berbasis server menggunakan bahasa PHP. Codeigniter dapat diperoleh dengan cara mengunduh di website resminya. Instalasi codeigniter dilakukan dengan cara:

Unduh file master Codeigniter v3.x.x Extrak file CI dan letakkan folder CI pada folder htdocs Xampp. Nama folder yang kita gunakan adalah visin-gcharts. Pastikan Xampp sudah berjalan dan akses melalui browser ke alamat localhost/visin-gcharts. ci

## Instalasi Uikit

Uikit merupakan framework User Interface (UI) yang akan kita gunakan untuk membuat elemen-elemen desain seperti card dan layout. Uikit menyediakan file CSS dan Javascript yang dapat kita integrasikan pada project Codeigniter. Berikut ini adalah langkah untuk mengintegrasikan Uikit kedalam Codeigniter:

Unduh Uikit dari web resmi. Versi yang kita gunakan adalah Uikit Versi 3. Buat folder pada proyek Codeigniter dengan nama vendor. Simpan folder CSS dan JS dari Uikit kedalam folder vendor/uikit/. Buka file application/config/autoload.php dan cari baris kode $autoload['helper']=array(). Update menjadi $autoload['helper']=array('url') agar fungsi-fungsi berkaitan dengan URL dan URI dapat berfungsi seperti base_url().

Buat file application/views/visin.php dan isi dengan kode berikut;

<title>Visin Google Charts</title>
Hello
<script src="uikit.js"></script>

Buat file application/controllers/Visin.php dan isi dengan kode dibawah ini. Fungsi $this->load->view('visin'); akan menampilkan view ke file views/visin.php.

load->view('visin'); } }

Update file application/config/routes.php. Cari baris kode yang berisi $route['default_controller'] = 'welcome'; dan ganti menjadi $route['default_controller'] = 'visin';. Ini akan membuat default controller mengarah ke Visin.php sehingga saat diakses melalui browser localhost/visin-gcharts maka akan mengarah ke halaman visin. Yeah! Uikit sudah berhasil dipasang di Codeigniter. Kode pada langkah 4 akan membuat spinner yang berada di tengah halaman.

insatll uiikit

Instalasi Google Charts

Google Charts merupakan framework visualisasi data. Berisi grafik-grafik yang dapat digunakan secara mudah untuk memvisualkan data. Google Charts tidak menyediakan file-file yang harus disimpan dalam file lokal kita, tapi menyediakan tautan librari yang dapat diintegrasikan kedalam proyek Codeigniter. Ikuti langkah berikut untuk memasang Google Charts kedalam Codeigniter.

Lampirkan tautan librari Javascript pada elemen head. Update file application/views/visin.php:

...

<title>Visin Google Charts</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ...

Buat sample grafik berikut ini untuk memeriksa apakah librari sudah berhasil diintegrasikan kedalam Codeigniter. Update file application/views/visin.php

<title>Visin Google Charts</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Mengambil API visualisasi. google.charts.load('current', {'packages':['corechart']}); // Memanggil fungsi drawChart() google.charts.setOnLoadCallback(drawChart); // Menentukan data yang akan ditampilkan function drawChart() { // Membuat data tabel var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Tentukan pengaturan chart var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Gambar chart kedalam elemen dengan id 'diagram-pie' yang ada dalam body var chart = new google.visualization.PieChart(document.getElementById('diagram-pie')); chart.draw(data, options); } </script>
<script src="uikit.js"></script>

Akses melalui localhost/visin-gcharts. Yups! Visualisasi pertama kita berhasil ditampilkan.

googlechorer

Menyiapkan Data dalam File JSON

Studi kasus ini adalah menggunakan sumber data dari file JSON. Anda dapat memperoleh data tersebut di repostori Github. Untuk menggunakan file JSON tersebut pada project Codeigniter, buat folder pada proyek Codeigniter visin-gcharts/assets dan letakkan file json di dalamnya.

Membaca File JSON Update file application/controllers/Visin.php menjadi seperti berikut ini:

load->view('visin'); } }

Untuk sementara kode $this->load->view('visin'); dinonaktifkan terlebih dahulu untuk memeriksa apakah file json sudah berhasil dibaca. Pembacaan file json tersebut menggunakan fungsi file_get_contens(). Buka browser utuk memastikan file berhasil terbaca.

cek file json

Menentukan Layout Visualisasi

Layout visualisasi kita susun berdasarkan problem statemen yang sudah dibuat. Studi kasus ini menggunakan 5 problem statement sehingga akan menghasilkan 5 grafik visualisasi. Kita akan menentukan 5 grafik tersebut dalam layout berikut:

Nomer pada layout tersebut mendandakan nomer visualisasi untuk problem statemen terkait. Kita perlu menyusun layout dalam Codeigniter yang kita buat. Update file visin.php menjadi seperti kode berikut:

Penjualan Berdasarkan Region

Hasil Penjualan Oleh Sales

Produk Terlaris

Penjualan Bulanan

Lalu untuk hasil masukan codingan berikut pada view visin.php

<title>Visin Google Charts</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> // Mengambil API visualisasi. google.charts.load('current', {'packages':['corechart']}); //mengambil data dari variabel PHP var region=[]; region['dataStr'] = ''; region['dataArray'] = JSON.parse(region['dataStr']); //menggambar grafik google.charts.setOnLoadCallback(function(){ drawChart(region['dataArray'], 'pie','region'); }); 
//sales
var sales=[];
sales['dataStr'] = '<?php echo $sales;?>';        
sales['dataArray'] = JSON.parse(sales['dataStr']);
google.charts.setOnLoadCallback(function(){
   drawChart(region['dataArray'], 'pie','region');
   drawChart(sales['dataArray'],'bar','sales');        
});

//produk
var produk=[];

produk['dataStr'] = '';
produk['dataArray'] = JSON.parse(produk['dataStr']);
//menggambar grafik google.charts.setOnLoadCallback(function(){ drawChart(region['dataArray'], 'pie','region'); drawChart(sales['dataArray'],'bar','sales'); drawChart(produk['dataArray'],'bar','produk');
});

//bulanan

var bulanan=[]; bulanan['dataStr'] = '';
bulanan['dataArray'] = JSON.parse(bulanan['dataStr']); //menggambar grafik google.charts.setOnLoadCallback(function(){ drawChart(region['dataArray'], 'pie','region'); drawChart(sales['dataArray'],'bar','sales'); drawChart(produk['dataArray'],'bar','produk'); drawChart(bulanan['dataArray'],'bar','bulanan'); });

// Menentukan data yang akan ditampilkan
function drawChart(dataArray,type,container) {
    // Membuat data tabel yang sesuai dengan format google chart dari sumber data array javascript
    var data = new google.visualization.arrayToDataTable(dataArray,false);      
    // Tentukan pengaturan chart
    var options = {
        legend:'bottom',            
        titlePosition:'none',
        titleTextStyle:{fontSize:18},
        chartArea:{width:'80%',height:'70%'}                      
        };
    if(type == 'pie')
    {
        var chart = new google.visualization.PieChart(document.getElementById(container));
    }
    if(type == 'column')
    {
        var chart = new google.visualization.ColumnChart(document.getElementById(container));
    }
    if(type == 'bar')
    {
        var chart = new google.visualization.BarChart(document.getElementById(container));
    }
    chart.draw(data, options);
}
</script>

Penjualan Berdasarkan Region

Hasil Penjualan Oleh Sales

Produk Terlaris

Penjualan Bulanan

<script src="uikit.js"></script>

dan control visin.php dengan codingan

data; //memanggil fungsi region() $output['region']=$this->region($data); //memanggil fungsi sales() $output['sales']=$this->sales($data); //mengirim variabel $output ke view $output['produk']=$this->produk($data); //mengirim variabel $output ke view $output['bulanan']=$this->bulanan($data); //mengirim variabel $output ke view $this->load->view('visin',$output); //echo json_encode($output['bulanan']); } function region($data) { $result=array(); foreach($data as $row) { if(isset($result[$row->Region]) == false) { $result[$row->Region]=$row->Units; }else{ $units=$result[$row->Region]; $result[$row->Region]=$units + $row->Units; } }; //konversi dalam format tabulasi $keys=array_keys($result); $tabs='Region','Units'; foreach($keys as $row) { $dt=[$row,$result[$row]]; array_push($tabs,$dt); } return json_encode($tabs); } 
function sales($data)
{
    $result=array();
    foreach($data as $row)
    {
        if(isset($result[$row->Rep]) == false)
        {
            $result[$row->Rep]=$row->Units;
        }else{
            $units=$result[$row->Rep];
            $result[$row->Rep]=$units + $row->Units;
        }
    };
    //sorting data berdasarkan value array secara menurun
    arsort($result);
    //konversi dalam format tabulasi
    $keys=array_keys($result);
    $tabs=[['Sales','Units']];
    foreach($keys as $row)
    {
        $dt=[$row,$result[$row]];
        array_push($tabs,$dt);
    }
    return json_encode($tabs);
}

    // produk
function produk($data)
{
    $result=array();
    foreach($data as $row)
    {
        if(isset($result[$row->Item]) == false)
        {
            $result[$row->Item]=$row->Units;
        }else{
            $units=$result[$row->Item];
            $result[$row->Item]=$units + $row->Units;
        }
    };
    //sorting data berdasarkan value array secara menurun
    arsort($result);
    //konversi dalam format tabulasi
    $keys=array_keys($result);
    $tabs=[['Produk','Units']];
    foreach($keys as $row)
    {
        $dt=[$row,$result[$row]];
        array_push($tabs,$dt);
    }
    return json_encode($tabs);
}

function bulanan($data)

{ $result=array(); foreach($data as $row) { //mengambil data tanggal $time=strtotime($row->OrderDate); $bulan=date('n',$time); $tahun=date('Y',$time);
if(isset($result[$tahun]) == false) { $result[$tahun][$bulan]=$row->Units;
}else{ if(isset($result[$tahun][$bulan]) == false) { $result[$tahun][$bulan]=(int)$row->Units; }else{ $result[$tahun][$bulan]=$result[$tahun][$bulan]+ (int) $row->Units; } } }; //mengkonversi index data $result kedalam array
$keys=array_keys($result); //membuat data inisial $tabs='Bulan'; //menambahkan header data sesuai dengan tahun yang ditemukan foreach($keys as $row) { array_push($tabs[0],(string)$row); } //membuat data bulan dalam satu tahun $bulan=['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nop','Des']; //memasukkan data penjualan bulanan kedalam tabulasi for($i=1; $i<=12; $i++) { $dt=[$bulan[$i-1]]; foreach($keys as $row) { array_push($dt,(int)$result[$row][$i]); } array_push($tabs,$dt); } return json_encode($tabs);
} }

hasilnya akan berupa

hasil

⚠️ **GitHub.com Fallback** ⚠️