Highchart and CodeIgniter 2

“Taqobbalallohu Minna wa Minkum” semoga Allah menerima amal kebaikan kita semua. Tidak lupa, di hari yang mulia ini saya memohon ampun dan maaf kepada teman-teman,  jika ada kesalahan yang telah dibuat, mohon maaf lahir dan batin.

Di hari raya ini, karena hobby saya menulis, kali ini ingin berbagi bagaimana caranya create chart menggunakan framework CodeIgniter dan highchart sebagai plugin. CodeIgniter yang digunakan adalah CodeIgniter versi 2. Kenapa CodeIgniter versi 2? ya… karena kasus ini berawal dari tempat saya bekerja. Selidik-selidik ternyata server yang digunakan di kantor yaitu php versi 5.3.

Langsung saja yuk..bagaimana langkah-langkah membuat chart.

Langkah-1
Pada view, tulis script seperti berikut pada <header>…</header>:

https://code.jquery.com/jquery-1.12.4.js 
?php%20echo%20base_url();%20?assets/code/highcharts.js
?php%20echo%20base_url();%20?assets/code/modules/exporting.js

kemudian, untuk memanggil ajax tulis script pada view (inputan year dan month) sebegai berikut :

$(document).ready(function(){
$("#submit").click(function(){
var year1=$("#year1").val();
var month1=$("#month1").val();
var year2=$("#year2").val();
var month2=$("#month2").val();
$.ajax({type: "POST",
url: "",
data:  {"year1" : year1, "month1" : month1,"year2" : year2, "month2" : month2},
success: function(data){                    
 $('#linechart120h').html(data);
}});return false;});});

Langkah-2
Pada controller tulis script sebagai berikut;

 Highcharts.chart('linechart120h', {
 title: { text: 'Performansi Collection -  s/d  ' },
 subtitle: { text: '' },
 xAxis: { categories:  }, 
 yAxis: { title: { text: 'Percentage (%)' } }, 
 legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' },
 plotOptions: { series: {  dataLabels: { enabled: true }  }  },
 series:  }); 

Langkah-3
Untuk memanggil data pada controller di view. Tulis script id=”linechart120h”

Done, berikut hasilnya:Jika teman-teman ada yang ditanyakan bisa dihubungi okto di nomor ini ya wa.. 08111353110.
Sumber: https://www.highcharts.com/

Export HTML Table to XLS

Selamat malam teman-teman, hehe… seperti biasa ada aja kalo mau nulis selalu aja ada ide.. hehe…ini sebenernya tugas kantor. Nah, latar belakang kali ini dimana kita membuat export excel namun letaknya ada di controller CodeIgniter. Saya tidak menampilkan data pada Views, sebab data yang ditampilan untuk keperluan data AJAX. Saya pikir ini akan sulit sekali, namun untungnya HTML5 memang luar biasa. Ikuti saja yuk langkah-langkahnya.

Langkah-1,  buatlah button namakan id btnExport

<p align="right"><button id="btnExport">Export</button></p>

Langkah-2, namakan table dan berikan nama id table_wrapper

<table id='table_wrapper' width='100%' class='table table-bordered table-condensed'>

Langkah-3, buat script javascriptnya.

 $(document).ready(function() {
 $("#btnExport").click(function(e) {
 e.preventDefault();

//getting data from our table
 var data_type = 'data:application/vnd.ms-excel';
 var table_div = document.getElementById('table_wrapper');
 var table_html = table_div.outerHTML.replace(/ /g, '%20');

var a = document.createElement('a');
 a.href = data_type + ', ' + table_html;
 a.download = 'exported_table_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
 a.click();
 });
});

done, hasil:

Terimakasih teman-teman semoga membantu 🙂

reference:
https://codepen.io/kostas-krevatas/pen/mJyBwp

Integrate Yii2-Highcharts Using Database

Selamat malam teman-teman, semoga hari ini menyenagkan, ada kalanya ketika membuat report perlu data visual agar mudah menarik kesimpulan dengan cepat, sebenernya kasus ini adalah kasus di kantor dimana teman-teman kesulitan membuat datavisual, nah data visual ini berupa Chart/grafik, lalu bagaimana ya jika kita integrasi chart kita dengan Yii2?

yuk ikut langkah berikut:

Langkah-1, akses ke halaman berikut:
https://github.com/miloschuman/yii2-highcharts

Langkah-2, pada CMD
composer require –prefer-dist miloschuman/yii2-highcharts-widget “dev-master”

Langkah-3, buatlah controller untuk menarik data

$data = Yii::$app->db->createCommand('select 
 regional,
 sum(msisdn) as jmlmsisdn,
 sum(bill_amount_1) as jmlba,
 sum(cb_bill_1) as jmlcb,
 sum(cb_bucket_1) as jmlcbu
 from dash_summary_aging_tracking 
 group by regional')->queryAll();
 //print_r($data);
 return $this->render('diagram', [
 'ddiagram' => $data 
 ]);

Langkah-4, buat view diagram kemudian tampilkan grafik.

<?php

use miloschuman\highcharts\Highcharts;
/* @var $this yii\web\View */

$this->title = 'Monitoring Collection';
 
foreach($ddiagram as $values){ 
 $a[0]= ($values['regional']); 
 $c[]= ($values['regional']); 
 $b[]= array('type'=> 'column', 'name' =>$values['regional'], 'data' => array((int)$values['jmlmsisdn'], 
 (int)$values['jmlba'],(int)$values['jmlcb'], (int)$values['jmlcbu']) ); 
}
 
echo 
Highcharts::widget([
 'options' => [
 'title' => ['text' => 'Monitoring Collection'],
 'xAxis' => [
 'categories' => ['jmlmsisdn', 'jmlba', 'jmlcb', 'jmlcbu']
 ],
 'yAxis' => [
 'title' => ['text' => 'Collection Data']
 ],
 'series' => $b
 ]
]);

Done

Semoga teman-teman dapat terbantu,

Reference:
https://github.com/miloschuman/yii2-highcharts

How to install Yii2

Halo, kawan-kawan selamat sore, kali ini kita mencoba bagaimana cara menginstall framework php yii2
Jika kawan-kawan masih bingung cara install yii2, yuk ikuti langkah-langkah berikut:

Langkah-1, agar composer seperti bower dan NPM
composer global require “fxp/composer-asset-plugin:^1.2.0”

Langkah-2, install yii versi stabil
composer create-project –prefer-dist yiisoft/yii2-app-basic cdsyii

Setelah itu, composer akan meminta token github,

isi token tersebut tunggu 5 sampai 10 menit.

done. Semoga kawan-kawan terbantu.

Reference: http://www.yiiframework.com/doc-2.0/guide-start-installation.html

Gii: Code Generator

Apa itu Gii?, gii merupakan extension dalam bentuk module yang secara default telah terinstal dan berfungsi untuk meng-generate kode program. Kali ini kita akan mencoba menggenerate operasi CRUD. Yuk ikuti langkah-langkah nya.

Langkah-1
Masuk ke halaman …web\gii

Langkah-2
Pilih dan klik model generator.

Langkah-3
Klik preview dan klik Generate

Langkah-4
Pilih dan klik CRUD Generator

Langkah-5
Klik preview dan klik Generate

Selesai.

Semoga teman-teman dapat terbantu.

Reference:
Membangun Aplikasi Profesional Berbasis Web Menggunakan Yii Framework-Hafid Mukhlasin

Install Composer On Ubuntu 16.04

Selamat malam teman-teman, kali ini kita akan mencoba melakukan instalasi composer di ubuntu 16.04. Tahap melakukan instalasi composer cukup mudah. Composer digunakan laravel untuk memanage dependensi, sehingga sebelumnya melakukan install laravel, maka hal yang terpenting yaitu melakukan instalasi composer. Bagaimana caranya?

Langkah-1
sudo apt-get update

Langkah-2
sudo apt-get install composer

Langkah-3, cek composer jika tersintall dengan baik.
composer -v

selection_021

Option, jika ada terlihat errot seperti berikut:
selection_022

Langkah-4, install package SNMP
sudo apt-get install snmp

done. Semoga bermanfaat bagi teman-teman yang membutuhkan.

Reference:
http://stackoverflow.com/questions/21257589/ubuntu-typing-php-in-terminal-shows-a-lot-of-errors
https://laravel.com/docs/5.4