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
Berikut penampakannya.
Download
Password: didanurwanda.blogspot.com
Wah bakal betah nih di Blognya, banyak tutor CI-nya ^^
BalasHapushehe, masih sedikit kok bro. tapi bakal di perbanyak dan yang jarang ada di blog lain.
HapusSaya coba mohon bantuannya ya mas ^^
BalasHapusmas Dida itu nama model nya pendapatan apa penghasilan mas ?
BalasHapuspendapatan bro, hehe salah ngetik.
Hapusterima kasih mas sangat sangat sangat membantu :D
BalasHapusTerima kasih, namun kalo x nya di ganti jam untuk merubahnya di folder mana nya mas?
BalasHapusmanteb masbro... (o)
BalasHapusKok gak keluar grafix nya ya?
BalasHapussaya coba keluar, hanya pakai jquerynya yg 1.10.1 min.js klu pkai 1.7.1 ngak kluar
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusSaya juga ga muncul grafik'a mas. Salah dmna'a ia..
BalasHapusBisa Gan, ane coba keluar...
Hapusjadi file2 CI default juga dibutuhkan, namun yg welcome ditimpa dg yg ini.
udah gitu jangan lupa ....\application\config\database.php disesuaikan dg punya agan
Komentar ini telah dihapus oleh pengarang.
BalasHapuskalau nggak muncul ganti script jquery.min.js dengan ini gan https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" yg diambil dari jquery cdnjs
BalasHapusga muncul karena jquery min js nya ga kepanggil :>)
BalasHapustinggal ganti jadi
echo base_url('/assets/highcharts/jquery.min.js');
Thanks , sangat membantu.
BalasHapuskalo mau menampilkan 2 data dalam 1 grafik gimana ?
BalasHapus:>)
BalasHapuscheer
BalasHapus