Google Charts Visualisasi Informasi - AhmadNurRofi/visin-gcharts GitHub Wiki

Visualisasi Informasi

Visualisasi data merupakan representasi visual dan teknik interaksi dengan memanfaatkan indera penglihatan manusia yang diolah dalam pikiran sehingga memungkinkan pengguna dapat melihat, menjelajahi, dan memahami sejumlah besar informasi sekaligus.Visualisasi informasi membantu pengguna untuk memperoleh pengetahuan melalui berbagai macam variabel data yang disajikan dalam bentuk grafis.

Memudahkan pengguna melihat, menjelajahi, dan memahami sejumlah informasi sekaligus. Membantu pengguna untuk memperoleh pengetahuan baru tentang sebuah proses. Membantu pengguna untuk menentukan keputusan.

Framework yang digunakan pada visualisasi data ini adalah:

  1. Codeigniter v3.1.11 (PHP Framework)
  2. Uikit v3.4.0 (UI Framework)
  3. Google Charts (Visualization Framework)

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:

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

visin-gcharts_1

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:

  1. Unduh Uikit dari web resmi. Versi yang kita gunakan adalah Uikit Versi 3.

  2. Buat folder pada proyek Codeigniter dengan nama vendor. Simpan folder CSS dan JS dari Uikit kedalam folder vendor/uikit/. visin-gcharts_2

  3. Setelah itu menambah helper url di autoload agar fungsi-fungsi berkaitan dengan URL dan URI dapat berfungsi seperti base_url(). visin-gcharts_2 5

  4. Membuat file views bernama visin.php visin-gcharts_3

  5. Setelah itu membuat controller bernama Visin.php (nama controller di codeigniter diawali dengan huruf kapital) visin-gcharts_4

  6. Update file application/config/routes.php dengan mengganti default_controller menjadi seperti gambar dibawah ini visin-gcharts_5

  7. Kemudian buka localhost/visin-gcharts hasilnya akan seperti dibawah ini visin-gcharts_6

Instalasi Google Charts

  1. Import librari Javascript google charts pada elemen head di file views visin.php visin-gcharts_7

  2. Buat sample grafik berikut ini untuk memeriksa apakah librari sudah berhasil diintegrasikan kedalam Codeigniter. visin-gcharts_8

  3. Buka localhost/visin-gcharts dan hasilnya akan seperti dibawah ini visin-gcharts_9

Menyiapkan Data dalam File JSON

  • Mengunduh data json dari repository github dan meletakan file tersebut pada project CI visin-gcharts/assets

Membaca File JSON

  1. Update file application/controllers/Visin.php menjadi seperti berikut ini: visin-gcharts_10

  2. 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. visin-gcharts_12

Menentukan Layout Visualisasi

  1. 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: visin-gcharts_13

  2. Update file visin.php pada folder view visin-gcharts_14

Visualisasi

  1. Jika format data sudah sesuai maka selanjutnya adalah memvisualkan data menggunakan Google Charts. Pertama, pastikan kode pada file controllers/Visin.php adalah seperti berikut: visin-gcharts_15

  2. Selanjutnya update kode Javascript yang ada pada file view/visin.php menjadi seperti berikut ini: visin-gcharts_16

  3. Jalankan browser maka akan terlihat tampilan seperti berikut: visin-gcharts_17

Data Penjualan Berdasarkan Sales

  1. Untuk membuat visualisasi penjualan berdasarkan sales, update file controllers/Visin.php sehigga menjadi seperti berikut: visin-gcharts_18 kemudian edit bagian function index visin-gcharts_19

  2. Update juga file view/visin.php menjadi seperti kode berikut: visin-gcharts_20

  3. Hasilnya akan seperti dibawah ini visin-gcharts_21

Data Penjualan Berdasarkan Produk

  1. Update file controllers/Visin.php visin-gcharts_22 kemudian edit bagian function index visin-gcharts_23

  2. Update file views/visin.php visin-gcharts_24

  3. Maka hasilnya akan seperti gambar dibawah ini visin-gcharts_25

Data Penjualan Berdasarkan Bulan di Tahun Tertentu

  1. Update file controllers/Visin.php: visin-gcharts_26 kemudian edit bagian function index visin-gcharts_27 1

  2. Selanjutnya, update juga file views/visin.php: visin-gcharts_27

  3. Maka hasilnya akan seperti dibawah ini visin-gcharts_28