Keranjang Coding : product


?>

Membuat Grafik Chart di Codeigniter v.3 Menggunakan Amchart4





Baiklah pada kesempatan kali ini, ane akan mencoba menuliskan tutorial membuat grafik chart di codeigniter 3 menggunakan amcarts4.

Beberapa hal yang harus dipersiapkan untuk membuat grafik chart adalah sebagai berikut :

  1. Silahkan Download Codeigniter 3 disini. Setelah sobat download, selanjutnya silahkan extract file rar/zip codeigniternya di folder htdocs, dan rename menjadi ci-amchart atau sesuai dengan keinginan sobat sekalian.
  2. Setelah proses diatas selesai, kita membutuhkan sebuah tempate agar tampilan dari codeigniter kita lebih terstruktur dan rapi, pada kesempatan kali ini kita akan menggunakan template sejuta umat yaitu adminLTE, bisa sobat download disinisetelah di download silahkan extract file zip/rar nya kedalam folder codeigniter kita, buatlah folder baru dengan nama assets. Silahkan extract di folder tersebut dan Rename menjadi adminLTE. dan Tambahan beberapa assets untuk pendukung dapat didownload disini 
  3. library dari amchart itu sendiri, dapat sobat download melalui website resmi disini atau melalui githubnya disini. Jika sobat kebingungan menggunakan 2 sumber tersebut, sobat bisa dowload file rarnya disini

Setelah semuanya sudah sobat download dan persiapkan, hal pertama yang sobat harus lakukan adalah setting configurasi dari codeigniter kita yang kita download tadi. Silahkan buka folder CI kita menggunakan text editor, disini saya menggunakan visual studio code.

Silahkan buka file config.php didalam folder application/config/, pada bagian base url, ada 2 cara untuk mengedit base url di codeigniter, yang pertama itu secara statis, seperti code berikut :

$config['base_url'] = "http://localhost/ci-amchart";

 kekurangan dari kode diatas ketika server kita sudah masuk hosting, maka kita wajib mengubah sesuai dengan domain kita. Yang kedua secara dinamis, dapat dilihat pada kode berikut :

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://" . $_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);

dengan menuliskan kode diatas, kita tidak perlu lagi mengubah base url nya saat aplikasi sudah masuk hosting.

Selanjutnya silahkan sobat buka file autoload.php di folder yang sama, silahkan tambahkan kode dibaris library sebagai berikut :

$autoload['libraries'] = array('database');

kita membutuhkan database sebagai sumber data yang kita gunakan.

dan dibaris helper

$autoload['helper'] = array('url');

Setelah itu kita akan lakukan configurasi database dididalam file Database.php, silahkan tambahkan kode berikut : 

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'ci_amchart',
    '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
);

pada kode diatas kita akan menggunakan database dengan nama ci_amcart.

Selanjutnya kita membuat database di Mysql dengan nama ci_amchart, setelah database dicreate silahkan Jalankan Query Berikut :

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for tbl_contoh
-- ----------------------------
DROP TABLE IF EXISTS `tbl_contoh`;
CREATE TABLE `tbl_contoh`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `kategori` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `created_by` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `created_date` datetime(0) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 155 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of tbl_contoh
-- ----------------------------
INSERT INTO `tbl_contoh` VALUES (1, 'Codeigniter', 'Heru', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (2, 'Codeigniter', 'Heru', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (4, 'Codeigniter', 'Maulana', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (5, 'Codeigniter', 'Maulana', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (6, 'Codeigniter', 'Maulana', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (7, 'Codeigniter', 'Maulana', '2020-10-01 08:01:34');
INSERT INTO `tbl_contoh` VALUES (8, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (9, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (10, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (11, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (12, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (13, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (14, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (15, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (16, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (17, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (18, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (19, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (20, 'Codeigniter', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (21, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (22, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (23, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (24, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (25, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (26, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (27, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (28, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (29, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (30, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (31, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (32, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (33, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (34, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (35, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (36, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (37, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (38, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (39, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (40, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (41, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (42, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (43, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (44, 'Laravel', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (45, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (46, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (47, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (48, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (49, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (50, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (51, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (52, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (53, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (54, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (55, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (56, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (57, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (58, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (59, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (60, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (61, 'Node JS', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (62, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (63, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (64, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (65, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (66, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (67, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (68, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (69, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (70, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (71, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (72, 'Java', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (73, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (74, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (75, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (76, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (77, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (78, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (79, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (80, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (81, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (82, 'C#', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (83, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (84, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (85, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (86, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (87, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (88, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (89, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (90, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (91, 'VB NET', 'Maulana', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (92, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (93, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (94, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (95, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (96, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (97, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (98, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (99, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (100, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (101, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (102, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (103, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (104, 'VB NET', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (105, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (106, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (107, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (108, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (109, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (110, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (111, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (112, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (113, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (114, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (115, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (116, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (117, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (118, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (119, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (120, 'C#', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (121, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (122, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (123, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (124, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (125, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (126, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (127, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (128, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (129, 'Java', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (130, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (131, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (132, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (133, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (134, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (135, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (136, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (137, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (138, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (139, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (140, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (141, 'Node JS', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (142, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (143, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (144, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (145, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (146, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (147, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (148, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (149, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (150, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (151, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (152, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (153, 'Laravel', 'Heru', '0000-00-00 00:00:00');
INSERT INTO `tbl_contoh` VALUES (154, 'Laravel', 'Heru', '0000-00-00 00:00:00');

SET FOREIGN_KEY_CHECKS = 1;

Query SQL diatas berguna untuk membuat table dengan nama tbl_contoh, untuk sumber data dari grafik kita nanti.

Buatlah sebuah controllers baru dengan nama Grafik.php , setelah itu tambahkan function construct yaitu fungsi di dalam class yang di eksekusi pertama kali saat class itu dipanggil, codenya sebagai berikut : 

function __construct()
    {
        parent::__construct();
        $this->load->model('Grafik_model');
    }

pada code diatas fungsinya setiap kali class Grafik di panggil, maka function yang pertama kali dijalankan adalah function __construct(), didalamnya terdapat code untuk load model yang akan kita gunakan, yang kita beri nama Grafik_model.

Selanjutnya tambahkan code berikut di dalam function index,

public function index()
    {
        $data = [
            'title' => 'Grafik Data',   // Sebagai Title dari halaman
        ];
        $this->load->view('index', $data);
    }

Pada code diatas kita membuat suatu variabel data yang akan kita kirimkan ke dalam views index.php, yaitu title dan data grafik.

Langkah selanjutnya kita akan membuat file index.php dalam folder application/views, Silahkan tambahkan code view yang sudah saya customize berikut : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?= $title; ?></title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/adminlte/css/skins/_all-skins.min.css">
    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <header class="main-header">
            <!-- Logo -->
            <a href="#" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>MD</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>MataDeveloper</b></span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#">
                                <img src="<?= base_url() ?>assets/adminlte/img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs">Matadeveloper</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="<?= base_url() ?>assets/adminlte/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>Matadeveloper</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                    </div>
                </div>
                <!-- /.search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">MAIN NAVIGATION</li>
                    <li class="active">
                        <a href="<?= base_url('grafik') ?>">
                            <i class="fa fa-line-chart"></i> <span>Grafik</span>
                        </a>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

       <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>Grafik Chart Menggunakan Amcharts</h1>
            </section>

           <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title"><i class="fa fa-line-chart"></i> Grafik </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                            
                           </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 2.4.13
            </div>
            <strong>
                Copyright &copy; 2020
                <?php if (date('Y') > 2020) {
                    echo ' - ' . date('Y');
                } ?>&nbsp;<a href="https://matadeveloper.com">Matadeveloper</a>.
            </strong>
            All rights reserved.
        </footer>

    </div>
    <!-- ./wrapper -->
    <!-- jQuery 3 -->
    <script src="<?= base_url() ?>assets/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="<?= base_url() ?>assets/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?= base_url() ?>assets/adminlte/js/adminlte.min.js"></script>
    <!-- Amchart Chart JS -->
    <script src="<?php echo base_url() ?>assets/amcharts4/core.js"></script>
    <script src="<?php echo base_url() ?>assets/amcharts4/chart.js"></script>
    <script src="<?php echo base_url() ?>assets/amcharts4/animated.js"></script>
    <script src="<?php echo base_url() ?>assets/amcharts4/kelly.js"></script>
</body>
</html>

Silahkan tambahkan code berikut ini:

<div class="box-body">
    <div class="init-loading grafik" style="height:600px;width:100%;"></div>
</div>

class init-loading ini nanti berguna untuk initialize icon spinner loading, ketika proses load data ke database, sedangkan class grafik sebagai class dari chart yang akan kita tampilkan

Untuk langkah selanjutnya kita akan menambahkan beberapa codingan javascript untuk menampilkan chart nya, silahkan tambahkan code berikut tepat di atas </body> atau dibawah library amchart JS.

<script>
$(document).ready(function() {
    init();
});
</script>

Pada code diatas berfungsi untuk setiap kita load halaman grafik, akan otomatis menjalankan function init() yang ada di dalam ready function diatas. Selanjutnya kita perlu menambahkan function init seperti berikut:

function init(){
   $(".init-loading").html("<i class='fa fa-spin fa-refresh'></i> &nbsp;&nbsp;&nbsp;Memuat Data ...");
   grafik();
}

Code diatas menjelas pada baris pertama dari function init ini berfungsi untuk menambahkan sebuah icon spinner ketika proses pengambilan data berlangsung, baris kedua ini merupakan sebuah function ajax untuk melakukan eksekusi data ke controllers.

Selanjutnya tambahkan functioni grafik() sebagai berikut : 

function grafik() {
   $.ajax({
     url: "<?php echo base_url() ?>grafik/data_grafik",
     dataType: "json",
     success: function(data) {
         barChart(data, "grafik");
     }
   })
}

Penjelasan pada code diatas adalah untuk menjalankan perintah ajax request ke function data_grafik di controllers Grafik.php, dataType yang digunakan dengan format JSON. Result ditampung dalam variabel data yang akan kita kirim kedalam function barChart().

Selanjutnya silahkan buka file Grafik.php di folder controllers sobat sekalian, dan tambahkan fucntion data_grafik sebagai berikut :

public function data_grafik()
    {
        $grafik = $this->Grafik_model->data_grafik();
        echo $data = json_encode($grafik);
    }

Silahkan masuk dalam folder application/models/ , buat file model dengan nama Grafik_model.php, setelah itu tambahkan code berikut :

<?php
class Grafik_model extends CI_Model{
    public function data_grafik()
    {
        $this->db->select('count(*) as data, kategori'); 
        $this->db->from('tbl_contoh');
        $this->db->group_by('kategori');
        return $this->db->get()->result();
    }
}

Code diatas adalah sql builder codeigniter untuk mengambil total data berdasarkan kategorinya.

Selanjutnya kita kembali lagi ke file index.php di folder views, sekarang kita perlu menambahkan function barChart(), function ini nanti berfungsi untuk memanggil chart dari amchart, tambahkan code sebagai berikut :

function barChart(data, chartdiv) {
   var chart = am4core.create(chartdiv, am4charts.XYChart);
   chart.data = data;
   // Create axes
   var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
   categoryAxis.dataFields.category = "label";
   categoryAxis.renderer.grid.template.location = 0;
   categoryAxis.renderer.minGridDistance = 20;
   categoryAxis.renderer.inside = false;
   categoryAxis.start = 0;

   categoryAxis.renderer.grid.template.disabled = true;
   var label = categoryAxis.renderer.labels.template;
   label.wrap = true;
   label.maxWidth = 160;
   label.tooltipText = "{category}";

   categoryAxis.events.on("sizechanged", function(ev) {
     var axis = ev.target;
     var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
     if (cellWidth < axis.renderer.labels.template.maxWidth) {
        axis.renderer.labels.template.rotation = -75;
        axis.renderer.labels.template.horizontalCenter = "right";
        axis.renderer.labels.template.verticalCenter = "middle";
     } else {
        axis.renderer.labels.template.rotation = 0;
        axis.renderer.labels.template.horizontalCenter = "middle";
        axis.renderer.labels.template.verticalCenter = "top";
     }
   });

   var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
   valueAxis1.extraMax = 0.3;
   valueAxis1.min = 0;
   var series1 = chart.series.push(new am4charts.ColumnSeries());
   series1.dataFields.valueY = "data";
   series1.dataFields.categoryX = "kategori";
   series1.yAxis = valueAxis1;
   series1.columns.template.tooltipText = "{valueY.value}";

   chart.cursor = new am4charts.XYCursor();
   chart.legend = new am4charts.Legend();
   chart.legend.position = "top";
}

Berikut adalah penjelasan dari kode diatas, dapat sobat perhatikan dikode dibawah ini

function barChart(data, chartdiv)

kode diatas adalah nama function yang kita buat, didalam function tersebut kita memerlukan parameter data sebagai data yang kita kirim melalui ajax request, dan parameter chartdiv adalah parameter class dari element div yang kita gunakan untuk menampilkan chartnya.

chart.data = data;

data JSON yang akan kita tampilkan.

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "kategori";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.inside = false;
categoryAxis.start = 0;
categoryAxis.renderer.grid.template.disabled = true; 
var label = categoryAxis.renderer.labels.template; 
label.wrap = true; 
label.maxWidth = 160; label.tooltipText = "{category}";
categoryAxis.events.on("sizechanged", function(ev) { 
  var axis = ev.target;
  var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
  if (cellWidth < axis.renderer.labels.template.maxWidth) {
     axis.renderer.labels.template.rotation = -75; 
     axis.renderer.labels.template.horizontalCenter = "right";
     axis.renderer.labels.template.verticalCenter = "middle";
  } else { 
     axis.renderer.labels.template.rotation = 0; 
     axis.renderer.labels.template.horizontalCenter = "middle"; 
     axis.renderer.labels.template.verticalCenter = "top";
  } 
});

code diatas merupakan configurasi dari XAxis yang kita gunakan, pada kasus ini kita menggunakan kategori sebagai x nya.

var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.extraMax = 0.3;
valueAxis1.min = 0;

code ini berfungsi untuk config dari Y Axis.

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "data";
series1.dataFields.categoryX = "kategori";
series1.yAxis = valueAxis1;
series1.columns.template.tooltipText = "{valueY.value}";

code diatas untuk create chart yang akan kita tampilkan, disini kita akan menampilkan bar charts.

chart.cursor = new am4charts.XYCursor();
chart.legend = new am4charts.Legend();
chart.legend.position = "top";

dan untuk kode diatas berfungsi untuk menampilkan cursor dari xy, dan untuk menampilkan icon dari kategorinya.

Hasil dari tutorial kita kali ini dapat dilihat pada gambar dibawah ini, 

Baiklah sekian dulu tutorial membuat chart kali ini, untuk part selanjutnya kita akan coba membuat filtering data chart, terimakasih telah mengikuti tutorial ini, salam Koding <^_^>

Bagi yang membutuhkan source nya silahkan download disini

Tags : Codeigniter Javascript Amcarts PHP Frontend

Sekilas Tentang Penulis


Heru Late Nugraha,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Menambahkan Fitur Filter data di Grafik
Next Post
Tutorial Sistem Notifikasi Realtime Di P