Membuat Grafik batang menggunakan HighChart dengan CI Oleh: muttaqin
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 ...
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 : 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 :
$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 :
<script type="text/javascript" src="bootstrap/js/jquery.js">
<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:suara;?>, color:colors[0], drilldown:{
name:'Calon Ke I', categories:['Calon Ke I'], data:[suara;?>], color:colors[0] } }, { y:suara;?>, color:colors[1], drilldown:{ name:'Calon Ke II', categories:['Calon Ke II'], data:[suara;?>], color:colors[1] } }, { y:suara;?>, color:colors[2], drilldown:{ name:'Calon Ke III', categories:['Calon Ke III'], data:[suara;?>], color:colors[2] } }, { y:suara;?>, color:colors[3], drilldown:{ name:'Calon Ke IV', categories:['Calon Ke IV'], data:[suara;?>], color:colors[3] } }, { y:suara;?>, color:colors[4], drilldown:{ name:'Calon Ke V', categories:['Calon Ke V'], data:[suara;?>], color:colors[4] } }, { y:suara;?>, color:colors[5], drilldown:{ name:'Calon Ke VI',
categories:['Calon Ke VI'], data:[ 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 + ':' + this.y + '% orang
'; 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 type="text/javascript" src="bootstrap/js/highcharts.js"> <script type="text/javascript" src="bootstrap/js/exporting.js"> link untuk javascript disini : www.4shared.com/zip/bWte0ka1/berkas.html
Tentang Penulis muttaqin sederhana dan selalu bersyukur
