[CodeIgniter] Membuat Chart dengan menggunakan Highcharts
Langsung saja kepada contoh. Silahkan Anda download Highcharts terlebih dahulu dan kemudian simpan pada folder tertentu. disini saya menggunakan folder assets. Selanjutnya buat database baru dan isi dengan table seperti berikut.
CREATE TABLE IF NOT EXISTS `tbl_pendapatan` ( `id` int(5) NOT NULL AUTO_INCREMENT, `tanggal` date NOT NULL, `hasil` int(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `tbl_pendapatan` (`id`, `tanggal`, `hasil`) VALUES (1, '2013-01-01', 30), (2, '2013-02-01', 20), (3, '2013-03-01', 90), (4, '2013-04-01', 70), (5, '2013-05-01', 20), (6, '2013-06-01', 40), (8, '2013-07-01', 90), (9, '2013-08-01', 10), (10, '2013-09-01', 90), (11, '2013-10-01', 60), (12, '2013-11-01', 90), (13, '2013-12-01', 40);
Selanjutnya buat controller baru, akan tetapi saya disini hanya menggunakan controller welcome.php dan kemudian di isi dengan script berikut
public function __construct() { parent::__construct(); $this->load->helper(array('url','html')); $this->load->model('pendapatan'); } public function index() { $data=array(); foreach($this->pendapatan->get()->result_array() as $row) $data[] = (int) $row['hasil']; $this->load->view('welcome_message',array('data'=>$data)); }Kemudian buat model dengan nama pendapatan.php dengan isi sebagai berikut.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class pendapatan extends CI_Model { public function __construct() { parent::__construct(); $this->load->database(); } public function get() { $this->db->select('*'); $this->db->like('tanggal','2013-'); $this->db->order_by('tanggal','asc'); return $this->db->get('tbl_pendapatan'); } } /* End of file pendapatan.php */ /* Location: ./application/models/pendapatan.php */Selanjutnya buka view/welcome_message.php dan tambahkan script berikut.
</head> <body> <div id="container"> <h1>CodeIgniter with Highcharts <span style="float:right">Dida Nurwanda</span></h1> <div id="body"> <div id="chart"></div> </div> <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p> </div> <script type="text/javascript" src="<?php echo base_url('/assets/jquery-1.7.2.min.js'); ?>"></script> <script type="text/javascript" src="<?php echo base_url('/assets/highcharts/highcharts.js'); ?>"></script> <script type="text/javascript" src="<?php echo base_url('/assets/highcharts/modules/exporting.js'); ?>"></script> <script type="text/javascript" src="<?php echo base_url('/assets/highcharts/themes/dark-green.js'); ?>"></script> <script type="text/javascript"> jQuery(function(){ new Highcharts.Chart({ chart: { renderTo: 'chart', type: 'line', }, title: { text: 'Pendapatan Tahun 2013', x: -20 }, subtitle: { text: 'http://didanurwanda.blogspot.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Pendapatan (Juta)' } }, series: [{ name: 'Pendapatan (Juta)', data: <?php echo json_encode($data); ?> }] }); }); </script> </body> </html>
Mudah kan ya, sayangnya ini hanya contoh sederhana. Jadi grafiknya tidak bergitu detail. heheh