Cara Membuat Diagram (Highchart) atau Statistik Menggunakan Ajax dan Codeigniter 3

on
Cara Membuat Diagram (Highchart) atau Statistik Menggunakan Ajax dan Codeigniter 3 - Salam hangat untuk sahabat jaslabku. Pada kesempatan kali ini kita akan membahas bagaimana cara menampilkan grafik menggunakan codeigniter 3 sesuai data dalam database, pada percobaan kali ini kita menggunakan highchart.

Kita tahu bahwa highchart pada dasarnya dirancang untuk menampilkan statistik data atau chart dalam bentuk diagram batang, diagram garis, diagram lingkar, dll. Untuk lebih jelas, sahabat jaslabku dapat mengunjungi http://highchart.com. 

Anda bisa mengintegrasikan highchart dengan beberapa teknologi bahasa pemograman. Pada kesempatan kali ini saya akan membahas bagaimana memakai atau mengintegrasikan highchart dengan framework codeigniter 3.

Persiapan
  1. Anda harus sudah paham setidaknya php dasar dan codeigniter CRUD
  2. Sublime Text atau teks editor lainnya tempat melakukan pengkodean atau menulis program
  3. XAMPP atau LAMP sebagai server web dan database mysql
  4. Web browser (Mozilla Firefox atau Chrome)
  5. Niat yang ikhlas :) 

Gambaran Hasil Kerja
Berikut merupakan hasil akhir yang diharapkan... :)

Struktur Folder Aset
Buat folder aset sejajar dengan folder application sebagai tempat untuk meletakkan file aset seperti js, css, img, dll.

 Langkah 1. Buat database db_jaslabku sahabat dapat sesuaikan nama database anda sesuai dengan kebutuhan.

Langkah 2. Buat tabel dengan nama temperatur dengan struktur tabel berikut.
CREATE TABLE `temperatur` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`date` datetime NOT NULL,
`min` float NOT NULL,
`max` float NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;


Langkah 3. Isi tabel dengan beberapa data, berikut contoh data yang saya pakai dalam percobaan ini
insert  into `temperatur`(`id`,`date`,`min`,`max`) values 
(1,'2018-02-01 11:32:43',28,35),
(2,'2018-02-02 11:33:06',25,39),
(3,'2018-02-03 11:33:17',26,40),
(4,'2018-02-04 11:33:27',22,33),
(5,'2018-02-05 11:33:42',21,34),
(6,'2018-02-06 11:33:51',25.6,38.4),
(7,'2018-02-07 11:34:03',20.9,35.6),
(8,'2018-02-08 11:41:02',21.5,39.5),
(9,'2018-02-09 11:41:30',20.5,39.7),
(10,'2018-02-10 11:41:41',24,38.9),
(11,'2018-02-11 11:41:53',23,38),
(12,'2018-02-12 11:42:04',23.5,39.7),
(13,'2018-02-13 11:42:18',22.6,37.9),
(14,'2018-02-14 11:42:28',25,40.5),
(15,'2018-02-15 11:42:38',23.1,41),
(16,'2018-02-16 11:42:49',27,42),
(17,'2018-02-17 11:43:01',26,40.6);

Hasilnya sebagai berikut.


 Langkah 4. Agar dapat mengakses database menggunakan codeigniter, anda harus setting atau konfigurasi file database.php yang berada dalam application\config\  sesuai dengan settingan database anda.
  
$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'db_jaslabku',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);

Langkah 5. Ubah atau modifikasi file autoload.php yang berada dalam application\config\ sepertiberikut ini
$autoload['libraries'] = array('database');

$autoload['helper'] = array('url', 'file', 'text', 'form');

 Langkah 6. Buat file model dengan nama M_statistik.php dalam folder application\models\ untuk mengakses data dalam tabel database seperti berikut ini

<?php

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


class M_statistik extends CI_Model {


    private $tabel = 'temperatur';


    function __construct() {   

    }


    function get_chart_data($start_date, $end_date) {

        $sql = 'SELECT * FROM ' . $this->tabel . ' WHERE DATE(date)>=' . $this->db->escape($start_date) . ' AND DATE(date)<=' . $this->db->escape($end_date);

        $query = $this->db->query($sql);

        $results = $query->result();

        return $results;

    }

}

Langkah 7. Selanjutnya buat file controller dengan nama Statistik.php yang berada dalam folder application\controllers\ dengan kode berikut
  
<?php

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


class Statistik extends CI_Controller {


public function __construct() {

        parent::__construct();

        $this->load->model('m_statistik', 'chart');

    }

    public function index() {

        $this->load->view('staistik_v');

    }

    public function get_chart_data() {

        if (isset($_POST['start']) AND isset($_POST['end'])) {

            $start_date = $_POST['start'];

            $end_date = $_POST['end'];

            $results = $this->chart->get_chart_data($start_date, $end_date);

            if ($results === NULL) {

                echo json_encode('Tidak ada data ditemukan');

            } else {

                $json = '[';

                $counter = 1;

                foreach ($results as $result) {

                    $json .= '[';

                    $json .= strtotime($result->date);

                    $json .= ',';

                    $json .= $result->min;

                    $json .= ',';

                    $json .= $result->max;

                    $json .= ']';

                    if ($counter < count($results)) {

                        $json .= ',';

                    }

                    $counter++;

                }

                $json .= ']';

                echo $json;

            }

        } else {

            echo json_encode('Tanggal wajib dipilih');

        }

    }

}


Langkah 8. Buat file view dengan nama statistik_v.php yang berada dalam folder application\views\ dengan kode berikut
  
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>Highchart menggunakan AJAX dan Codeigniter 3</title>

        <link rel="stylesheet" href="<?php echo base_url(); ?>aset/css/bootstrap.min.css">

        <link rel="stylesheet" href="<?php echo base_url(); ?>aset/css/daterangepicker.css">

        <script type='text/javascript' src="<?php echo base_url(); ?>aset/js/jquery-1.9.1.min.js"></script>

        <script type='text/javascript' src="<?php echo base_url(); ?>aset/js/jquery-migrate-1.2.1.js"></script>

        <script type='text/javascript' src="<?php echo base_url(); ?>aset/js/jquery-ui-1.10.3-custom.min.js"></script>        

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/sugar.min.js'></script>

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/highcharts.js'></script>

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/highcharts-more.js'></script>

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/exporting.js'></script>

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/script.js'></script>

        <script type='text/javascript' src='<?php echo base_url(); ?>aset/js/daterangepicker.js'></script>

    </head>

    <body>

        <div style="margin: 10px 0 0 10px;">

            <h3> Statistik Cuaca Kab. Limapuluh Kota </h3>

            <form class="form-horizontal">

                <fieldset>

                    <div class="input-prepend">

                        <span class="add-on"><i class="icon-calendar"></i> </span> <input

                            type="text" name="range" id="range" />

                    </div>

                </fieldset>

            </form>

            <div id="msg"></div>

            <div id="chart"></div>

        </div>

    </body>

</html>


Langkah 9. Buat file js dengan nama jaslabku.js pada folder aset\ dengan kode berikut ini
  
$(function () {


    // Setting waku default

    var startDate = Date.create().addDays(-6), // 7 days ago

            endDate = Date.create(); // today


    var range = $('#range');


    // Tampilkan tanggal sesuai format

    range.val(startDate.format('{yyyy}-{MM}-{dd}') + ' - '

            + endDate.format('{yyyy}-{MM}-{dd}'));


    // Load chart atau statistik

    ajaxLoadChart(startDate, endDate);


    range.daterangepicker({

        startDate: startDate,

        endDate: endDate,

        ranges: {

            'Hari Ini': ['today', 'today'],

            'Kemarin': ['yesterday', 'yesterday'],

            '7 Hari yang Lalu': [Date.create().addDays(-6), 'today'],

            '30 Hari yang Lalu': [Date.create().addDays(-29), 'today']

        }

    }, function (start, end) {

        ajaxLoadChart(start, end);

    });


    // Fungsi untuk meload data menggunakan AJAX dan menampilkannya dalam chart

    function ajaxLoadChart(startDate, endDate) {

        // Jika data tidak ada chart akan dibersihkan

        if (!startDate || !endDate) {

            return;

        }

        // AJAX request

        $.post('http://localhost/highchart/index.php/statistik/get_chart_data', {

            start: startDate.format('{yyyy}-{MM}-{dd}'),

            end: endDate.format('{yyyy}-{MM}-{dd}')

        }, function (data) {

            if ((data.indexOf("No record found") > -1)

                    || (data.indexOf("Tanggal Wajib dipilih") > -1)) {

                $('#msg').html('<span style="color:red;">' + data + '</span>');

            } else {

                $('#msg').empty();

                $('#chart').highcharts({

                    chart: {

                        type: 'line',

                        zoomType: 'x'

                    },

                    title: {

                        text: 'Statistik cuaca'

                    },

                    xAxis: {

                        type: 'datetime'

                    },

                    yAxis: {

                        title: {

                            text: null

                        }

                    },

                    tooltip: {

                        crosshairs: true,

                        shared: true,

                        valueSuffix: '°C'

                    },

                    legend: {

                        enabled: false

                    },

                    series: [{

                            name: 'Temperatur',

                            data: data

                        }]

                });

            }

        }, 'json');

    }

});
Langkah 10. Setting rute utama website dengan staistik pada file routes.php yang berada dalam folder application\config\ dengan kode berikut
$route['default_controller'] = "statistik";

Langkah 11. Jalankan website dengan url : http://localhost/highchart/
Cukup sekian percobaan atau tutorial Cara Membuat Diagram (Highchart) atau Statistik Menggunakan Ajax dan Codeigniter 3, Semoga dapat bermanfaat... :)


Anda kami sarankan untuk menbaca :
Belajar Codeigniter Untuk Pemula dan MySQL - CRUD part 1 (entri data)
Location: Padang, Padang City, West Sumatra, Indonesia

Comments

  1. UnknownMonday, March 5, 2018 at 5:43:00 PM GMT+7

    Makasih Minn... Succes Nih buat grapiknya minn.. makasih bnget min

    ReplyDelete
  2. ekopdeWednesday, May 30, 2018 at 1:02:00 PM GMT+7

    kok ga keluar tanggalnya?

    ReplyDelete
  3. AnonymousMonday, July 30, 2018 at 11:28:00 AM GMT+7

    bingung aing :D

    ReplyDelete
  4. UnknownWednesday, August 15, 2018 at 6:58:00 PM GMT+7

    gan, bagi file javascriptnya yang terhubung di view statistik_v.php

    ReplyDelete
  5. JhoanThursday, July 22, 2021 at 2:05:00 PM GMT+7

    pelit ilmu jangan sok sok buat source code dong, kasih file yang lengkap prett!!

    ReplyDelete

Post a Comment