Kamis, 01 Agustus 2013


Selamat berjumpa lagi Pemirsa, kali ini saya akan coba share cara membuat grafik menggunakan highcharts ala Ika Unbaja, website resmi ikatan keluarga alumni - IKA unbaja ini sengaja saya buat sebagai media komunikasi alumni di dunia maya, di dalam grafik ini saya memiliki kriteria jurusan yang sudah di persipakan di table jurusan kemudian total alumni di ambil dari table registasi alumni, highcharts secara otomatis membuat persentasinyawalaupun sudah di set 2 digit tetap saja digit yang ditampilkan lebih dari 2 digit, next cari2 lagi cara untuk menampilkan hanya 2 digit.
Sebelumnya pemirsa harus download dulu source nya di highcharts, dengan hanya satu halaman kode saja highchart akan menampilkan hasilnya.

psb_model->data_jurusan();
$jml_alumni = $this->psb_model->jml_alumni();
$total= $jml_alumni->num_rows();
$tampil_data = '';
$a=1;
foreach($jurusan->result() as $t){
$data_jml = $this->psb_model->data_per_jurusan($t->id_jurusan);
$jml = $data_jml->num_rows();
//$x = ($jml/$total)*100;
$persen = $jml; //round($x,2);
$data[$a] = "['".$t->jurusan."',".$persen."]";
$a++;
}
$tampil_data = '';
$jml_jurusan = 15;
for ($i=1; $i<=$jml_jurusan; $i++) {
$tampil_data .= $data[$i];
if($i<$jml_jurusan) $tampil_data .= ',';
}
?>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Grafik Registrasi Alumni'
},
subtitle: {
text: 'Total Registrasi : <?php echo $total;?> Alumni'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 0
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Total :<?php echo $total;?> Alumni',
data: [<?php echo $tampil_data;?>]
}]
});
});
});
</script>
<div id="container" style="height: 400px; margin: 0 auto; min-width: 400px;">
</div>
<a href="http://ikaunbaja.org/" target="_blank">
</a>

Sumber 
Categories:

0 komentar:

Posting Komentar

Subscribe to RSS Feed Follow me on Twitter!