» » [CodeIgniter] Membuat Chart dengan menggunakan Highcharts
Senin, 29 April 2013

4/29/2013
18
Sudah hampir dua minggu saya tidak menulis artikel dan pada kesempatan kali ini saya akan memberikan sedikit atau secuil contoh penerapan Highcharts pada CodeIgniter. Tetapi apa itu highcharts? Highcharts adalah media atau library javascript yang dapat digunakan untuk membuat Grafik Chart untuk sarana presentasi. Highcharts memiliki banyak dukungan charts dan menghasilkan grafik yang indah dan bersih. Mantep bukan ? :D

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
Diposting oleh di 4/29/2013
Label:

18 komentar:

  1. Wah bakal betah nih di Blognya, banyak tutor CI-nya ^^

    BalasHapus
    Balasan

    1. hehe, masih sedikit kok bro. tapi bakal di perbanyak dan yang jarang ada di blog lain.

      Hapus

  2. Saya coba mohon bantuannya ya mas ^^

    BalasHapus

  3. mas Dida itu nama model nya pendapatan apa penghasilan mas ?

    BalasHapus
    Balasan

    1. pendapatan bro, hehe salah ngetik.

      Hapus

  4. terima kasih mas sangat sangat sangat membantu :D

    BalasHapus

  5. Terima kasih, namun kalo x nya di ganti jam untuk merubahnya di folder mana nya mas?

    BalasHapus

  7. Kok gak keluar grafix nya ya?

    BalasHapus
    Balasan

    1. saya coba keluar, hanya pakai jquerynya yg 1.10.1 min.js klu pkai 1.7.1 ngak kluar

      Hapus

  8. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

  9. Saya juga ga muncul grafik'a mas. Salah dmna'a ia..

    BalasHapus
    Balasan

    1. Bisa Gan, ane coba keluar...
      jadi file2 CI default juga dibutuhkan, namun yg welcome ditimpa dg yg ini.
      udah gitu jangan lupa ....\application\config\database.php disesuaikan dg punya agan

      Hapus

  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

  11. kalau 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

    BalasHapus

  12. ga muncul karena jquery min js nya ga kepanggil :>)
    tinggal ganti jadi
    echo base_url('/assets/highcharts/jquery.min.js');

    BalasHapus

  14. kalo mau menampilkan 2 data dalam 1 grafik gimana ?

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.

Langganan: Posting Komentar (Atom)