Cara Membuat Grafik Dengan CodeIgniter dan Echarts

15 September 2018 | Tags: Cara membuat grafik dengan CodeIgniter, Cara Membuat Grafik dengan Echarts, Grafik dengan CodeIgniter, Grafik Dengan Echarts, Membuat Grafik Dengan CodeIgniter dan Echarts

Dalam membangun aplikasi, bagian penting yang harus dibuat adalah laporan. Laporan selain disajikan dalam bentuk tabel juga harus dilengkapi dengan grafik atau bagan. Tampilan grafik bertujuan untuk memudahkan pengguna membaca data dengan cepat dan efektif. Banyak library yang tersedia untuk membuat grafik, baik yang gratis maupun berbayar. Pada artikel ini saya akan membahas cara membuat grafik dengan CodeIgniter dan Echarts.

Cara Membuat Grafik dengan CodeIgniter dan Echarts

Mengapa menggunakan Echarts? Mungkin itu pertanyaan awal yang sering muncul. Beberapa alasan untuk memilih Echarts adalah sebagai berikut:
1. Free To Use: Echarts gratis untuk digunakan, sehingga tidak harus mengeluarkan biaya lebih.
2. Rich Features: Kaya akan fitur, sehingga memungkinkan kita untuk menyajikan data dengan berbagai bentuk.
3. Active Community: Komunitas yang aktif, sehingga bila menemukan kendala, anda bisa mengajukan pertanyaan ke forum.
Dengan alasan tersebut, maka Echarts layak anda jadikan pilihan untuk mengembangkan aplikasi.

Langkah-langkah cara membuat grafik dengan CodeIgniter dan Echarts

Sebelumnya saya mengasumsikan anda sudah menguasai dasar-dasar CodeIgniter. Jika belum silahkan kunjungi situs-nya atau cari artikel terkait CodeIgniter di internet.

Langkah 1- Buat Folder assets pada CodeIgniter

Buat folder assets di CodeIgniter. Folder ini untuk menampung file echarts.

Langkah 2- Download Echarts

Buka situs Echarts di https://ecomfe.github.io/echarts-doc/public/en/index.html dan cari menu download. Anda akan menemukan pilihan: Common, Simple, Full, dan Source. Silahkan pilih sesuai keinginan.
Pada contoh ini saya memilih Full. Setelah di-download copy file echarts.min.js (Full) ke folder assets.

Langkah 3- Buat Controller: Echarts.php

Buat Controller pada folder application/controllers dengan nama Echarts.php
Kemudian ketikkan perintah berikut:

application/controllers/Echarts.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Echarts extends CI_Controller {

	public function index()
	{
		$this->load->view('candle');
	}
}

Langkah 4- Buat View: bar.php

Buat View pada folder application/views dengan nama bar.php. File ini berfungsi untuk menampilkan grafik.
Kemudian ketikkan perintah berikut:

application/views/bar.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh Echarts</title>
<script src="<?php echo base_url()?>assets/echarts.min.js"></script>
</head>
<body>
<h1>Contoh Echarts</h1>
 <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</body>
</html>

Langkah 5- Jalankan Program

Berikutnya coba jalankan program dengan mengakses alamat: http://localhost/nama_folder/index.php/echarts
Maka di browser anda akan tersaji grafik.

Download Cara Membuat Grafik dengan CodeIgniter dan Echarts

Download