[CodeIgniter] Membuat Chart dengan menggunakan Highcharts

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.