Membuat Grafik batang menggunakan HighChart dengan CI

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Grafik batang menggunakan HighChart dengan CI"

Farida Makmur
7 tahun lalu
Tontonan:

2 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 : <?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();

3 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();

4 $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="<?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:

5 ,,,,, 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',

6 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);

7 orang</b><br/>'; + 'detail '; ); ); </script> </div> );, 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 + '% if (point.drilldown) s += 'Click to view ' + point.category else s += 'Click again to back'; return s;, series:[ name:name, data:data, color:'white' ], exporting: enabled:false <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 :

8 Tentang Penulis muttaqin sederhana dan selalu bersyukur

dokumen-dokumen yang mirip

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 4. CRUD (Create, Read, Update, Delete)