selamat sore temen - temen pada penulis kali saya ingin berbagi bagaimana membuat grafik batang Highcart menggunakan CI ,singkatan CI pasti tidak asing lagikan bagi kaum muda pencinta Web Developer ,, pada awal nya saya disuruh buat apalikasi untuk proses pemilihan umum di kampus ane tapi karena waktu nya mempet jadi nya gak di terapin deh yang ane bisa buat aplikasi nya untuk di pakai jika di perlukan di tahap ini penulis ingin membagai salah satu bagian dari proses pembuatan aplikasi pemilihan umum yang ada di kampus penulis yaitu membuat hasil pemenang dalam bentu grafik jadinya penulis buat pakek higchart ini hehe .. tanpa banyak cincong langsung fokus
- Database nya :
-
CREATE TABLE IF NOT EXISTS `pemilihan` (
`nim` varchar(12) NOT NULL,
`bem` enum('1','2','3','4','5','6') NOT NULL,
`date` date NOT NULL,
`status` varchar(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1; - 1. model :
-
<?php class M_bem extends CI_Model { function __construct() { parent::__construct(); } function get_row() { $query= $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='1' "); return $query->result(); } function get_row1() { return $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='2' ")->result(); } function get_row2() { return $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='3' ")->result(); } function get_row3() { $query= $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='4' "); return $query->result(); } function get_row4() { return $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='5' ")->result(); } function get_row5() { return $this->db->query("SELECT COUNT(bem) as suara FROM pemilihan WHERE bem='6' ")->result(); } // end calon bem } - 2.controller :
-
<?php class Grafik extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('m_bem'); } function index() { $data = array( 'suara' => $this->m_bem->get_row(), 'suara1' => $this->m_bem->get_row1(), 'suara2' => $this->m_bem->get_row2(), 'suara3' => $this->m_bem->get_row3(), 'suara4' => $this->m_bem->get_row4(), 'suara5' => $this->m_bem->get_row5(), ); $data['title'] = "Grafik Winner BERM"; $this->load->view('juara/element/vheader', $data); $this->load->view('juara/page/vbem'); $this->load->view('juara/element/vfooter'); } // end calon bem } } ?> - 3.view :
<!--/span-->
<script type="text/javascript" src="<?php echo base_url(); ?>bootstrap/js/jquery.js"></script>
<div id="container">
<?php foreach ($suara as $mh) ; ?>
<?php foreach ($suara1 as $mh1) ; ?>
<?php foreach ($suara2 as $mh2) ; ?>
<?php foreach ($suara3 as $c4) ; ?>
<?php foreach ($suara4 as $c5) ; ?>
<?php foreach ($suara5 as $c6) ; ?>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Calon ke I', 'Calon Ke II' , 'Calon Ke III', 'Calon IV', 'Calon Ke V', 'Calon Ke VI'],
name = 'Perolehan suara',
data = [
{
y:<?php echo $mh->suara;?>,
color:colors[0],
drilldown:{
name:'Calon Ke I',
categories:['Calon Ke I'],
data:[<?php echo $mh->suara;?>],
color:colors[0]
}
},
{
y:<?php echo $mh1->suara;?>,
color:colors[1],
drilldown:{
name:'Calon Ke II',
categories:['Calon Ke II'],
data:[<?php echo $mh1->suara;?>],
color:colors[1]
}
},
{
y:<?php echo $mh2->suara;?>,
color:colors[2],
drilldown:{
name:'Calon Ke III',
categories:['Calon Ke III'],
data:[<?php echo $mh2->suara;?>],
color:colors[2]
}
},
{
y:<?php echo $c4->suara;?>,
color:colors[3],
drilldown:{
name:'Calon Ke IV',
categories:['Calon Ke IV'],
data:[<?php echo $c4->suara;?>],
color:colors[3]
}
},
{
y:<?php echo $c5->suara;?>,
color:colors[4],
drilldown:{
name:'Calon Ke V',
categories:['Calon Ke V'],
data:[<?php echo $c5->suara;?>],
color:colors[4]
}
},
{
y:<?php echo $c6->suara;?>,
color:colors[5],
drilldown:{
name:'Calon Ke VI',
categories:['Calon Ke VI'],
data:[ <?php echo $c6->suara;?>],
color:colors[5]
}
}
];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name:name,
data:data,
color:color || 'white'
}, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart:{
renderTo:'container',
type:'column'
},
title:{
text:'PEROLEHAN SUARA PADA PEMILIHAN CAPRES DAN CAWAPRES,TAHUN 2013 /2014'
},
subtitle:{
text:'Click the columns to see winner. Click again to view detail.'
},
xAxis:{
categories:categories
},
yAxis:{
title:{
text:'Total percent Winner '
}
},
plotOptions:{
column:{
cursor:'pointer',
point:{
events:{
click:function () {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels:{
enabled:true,
color:colors[0],
style:{
fontWeight:'bold'
},
formatter:function () {
return this.y + '%';
}
}
}
},
tooltip:{
formatter:function () {
var point = this.point,
s = this.x + ':<b>' + this.y + '% orang</b><br/>';
if (point.drilldown) {
s += 'Click to view ' + point.category + 'detail ';
} else {
s += 'Click again to back';
}
return s;
}
},
series:[
{
name:name,
data:data,
color:'white'
}
],
exporting:{
enabled:false
}
});
});
});
</script>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>bootstrap/js/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>bootstrap/js/exporting.js"></script>
link untuk javascript disini : www.4shared.com/zip/bWte0ka1/berkas.html
