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/

Advertisements

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

Fusionchart

Sudah diduga sebelumnya, javascript chart yang dahulu gratis kini sudah tidak gratis. Sebagai contoh FusionChart http://www.fusioncharts.com/

fusionchart

tapi jangan kecewa, saya punya backupnya loh he.. he.. he..

Gimana caranya yak buat grafik pake fusionchart? Mau tau? yuk nyimak..

1. Buatlah file index.php dengan script seperti berikut:

  http://swfobject.js

  var flashvars = {};
  flashvars.xml_file = "flashmo_264_photo_list_2.xml";
  var params = {};
  params.wmode = "transparent";
  params.allowfullscreen = true;
  var attributes = {};
  attributes.id = "slow";
  swfobject.embedSWF("flashmo_264_bar_gallery.swf", "flashmo_template", "900", "150", "9.0.0", false, flashvars, params, attributes);

 http://jquery-1.5.1.min.js
 http://js/jquery.fusioncharts.js
 http://js/FusionCharts.js

<?php
 echo"<span id='myChart2Container'>Loading FusionCharts!</span>

 $('#myChart2Container').insertFusionCharts({
  swfPath: 'Charts/',
  id: 'chart2',
  width: '900',
  height: '300', 
  type: 'Column3D',
  data: 'summary.php',
  dataFormat: 'URIData'
  });
  "; 
 echo"<hr>"; 
 ?>
 

2. File index.php akan memanggil data dari file summary.php, berikut script summary.php

<?php
 include "config/fungsi_indotgl.php";
 include"config/koneksi.php"; 
 include"config/library.php";

$result = mysql_query(" select bulan, 
  COUNT(tgl_cash) as jumlah_jual 
  from tbl_motor 
  where tgl_cash like '%2015%' and tgl_cash<>'0000-00-00' group by bulan "); 
 echo "<graph caption='Penjualan CV. H.M. Asep Motor Tahun $thn_sekarang' xAxisName='Bulan' yAxisName='Penjualan' numberPrefix=''>";
 $colors = array( 'AFD8F8','F6BD0F','8BBA00','FF8E46','008E8E','D64646','8E468E','588526',
  'B3AA00','008ED6','9D080D','A186BE','CC6600','FDC689','ABA000','F26D7D',
  'FFF200','0054A6','F7941C','CC3300','006600','663300','6DCFF6'); 
 $no=0;

while ($data = mysql_fetch_array($result)) {
  $bulan=konversi_bulan($data['bulan']);
  echo "<set name='$bulan' value='$data[jumlah_jual]' color='$colors[$no]' />";
  $no++;
 }

echo "</graph>";
 ?>
 

3. Result:
diagramfusionchart

4. Done 😀

Sekian Terimakasih,
Regards,

Okto Alhamda Putra