Membuat Highchart Dinamis di Codeigniter 3

Code Candil Kuya - Hallo Sobat Candil Code Ayo Belajar Web Programming. Di bagian ini, kita akan menggunakan Codeigniter 3 sehingga kita bisa mendapatkan grafik tinggi yang dinamis. saya akan menggunakan aplikasi MySQL untuk memahami implementasi highcharts. Saya akan menggunakan highchart js untuk membuat 3d chart, pie chart, bar chart, map chart, line chart, area chart, dll, dalam aplikasi Codeigniter 3. 

Dalam proyek Codeigniter ini, saya akan menggunakan highcharts js sehingga saya dapat menggunakan database untuk membuat bagan kolom dinamis. Untuk panel admin mana pun, persyaratan dasarnya adalah bagan. Jika kami mengembangkan proyek untuk klien, mereka selalu mengharuskan dasbor admin mereka berisi bagan sehingga mereka dapat dengan mudah melakukan kasih sayang antara langganan baru saya, penjualan, pengguna baru, dll. Dengan menggunakan bagan, kami dapat dengan cepat dan mudah membandingkan antara setiap bulan, setiap tahun, dll, dengan menggunakan grafik.

Dalam contoh saya di bawah ini, saya akan membuat bagan kolom. saya membuatnya untuk pemirsa, dan setelah itu, saya akan mengklik situs web yang dimasukkan. Dengan menggunakan grafik kolom ini, kita bisa membandingkan jumlah pengunjung dalam beberapa bulan, dan kita juga bisa mendapatkan informasi jumlah klik pada bulan tersebut. Jadi untuk ini, kita akan membuat tabel "demo_viewer" dan "demo_click". Menggunakan tabel ini, kita akan mendapatkan dinamis sebagai output. Outputnya didapat dari database, dan itu akan ditampilkan untuk kita sebagai grafik. Langkah-langkah untuk mendapatkan highchart dari sebuah website dijelaskan sebagai berikut:

Langkah 1 :

Pada langkah ini, kita akan membuat tabel Database . Untuk ini, kita akan membuat "h_sole" sebagai database baru. Jika kita ingin mengganti namanya, kita bisa melakukannya. Setelah itu, kami akan menjelaskan perbandingan antara grafik kolom klik dan pemirsa. Saat kita ingin menerapkannya, kita perlu membuat dua tabel. Satu tabel akan dibuat untuk penampil sebagai "demo_viewer", dan tabel kedua akan dibuat untuk klik sebagai "demo_click". Kedua tabel akan dibuat dengan menggunakan query MySQL

Buat tabel demo_viewer:

CREATE TABLE IF NOT EXISTS `demo_viewer` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `numberofview` int(11) NOT NULL,  
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,  
  PRIMARY KEY (`id`)  
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;  

Buat tabel demo_click:

CREATE TABLE IF NOT EXISTS `demo_click` (  
  `id` int(11
  `numberofclick` int(12
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,  
  PRIMARY KEY (`id`)  
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;  

Langkah 2:

Pada langkah ini, kita akan membuat Konfigurasi Database . Untuk ini, kami akan menambahkan beberapa detail database, seperti nama database, nama pengguna, kata sandi, dll, yang dijelaskan sebagai berikut:

application/config/database.php:

<?php  
defined('BASEPATH') OR exit('No direct script access allowed');  
$active_group = 'default'
$query_builder = TRUE;  
$db['default'] = array(  
    'dsn'   =>
    'hostname' => 'localhost',  
    'username' => 'root',  
    'password' => 'root',  
    'database' =>
    'dbdriver' => 'mysqli',  
    'dbprefix' => '',  
    'pconnect' =>
    '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 3:

Pada langkah ketiga, kita akan menambahkan Route . Untuk tampilan grafik dan render, kami akan menambahkan satu rute. Untuk ini, kami akan membuka file kami bernama route.php dan kemudian kami akan memasukkan kode berikut:

application/config/routes.php:

$route['default_controller'] = 'welcome';  
$route['404_override'] = '';  
$route['translate_uri_dashes'] = FALSE;  
$route['my-chart'] = "ChartController"; 

Langkah 4:

Pada langkah ini, kita akan Create Controller.Untuk ini, sebuah metode akan dibuat bernama "index" dengan ChartController. Untuk mengambil semua data database, kita akan menulis kode berikut. Kami akan menggunakan folder pengontrol ini sehingga kami dapat membuat metode baru. Kode untuk melakukannya adalah sebagai berikut:

application/controllers/ChartController.php:

defined('BASEPATH') OR exit('No direct script access allowed');  
     
class ChartController extends CI_Controller {  
    /** 
     * This method is used to get all the data. 
     * 
     * @It will return Response 
    */  
    public function __construct() {  
       parent::__construct();  
       $this->load->database();  
    }   
    
    /** 
     * This method is used to get all the data. 
     * 
     * @It will return Response 
    */  
    public function index()  
    {  
        $query = $this->db->query("SELECT SUM(numberofclick) as count FROM demo_click   
            GROUP BY YEAR(created_at) ORDER BY created_at");   
        $data['click'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);  
     
        $query = $this->db->query("SELECT SUM(numberofview) as count FROM demo_viewer   
            GROUP BY YEAR(created_at) ORDER BY created_at");   
        $data['viewer'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);  
     
        $this->load->view('my_chart', $data);  
    }  
}  

Langkah 5:

Pada langkah ini, kita akan membuat file View . Untuk ini, kita akan menggunakan folder tampilan untuk membuat "my_chart.php" sebagai file tampilan baru. Setelah itu, kita akan menggunakan file tersebut untuk menambahkan kode berikut:

application/views/my_chart.php:

<!DOCTYPE html>  
<html>  
<head>  
    <title>HighChart</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>  
    <script src="https://code.highcharts.com/highcharts.js"></script>  
</head>  
<body>  
    
<script type="text/javascript">  
    
$(function () {   
    
    var data_click = <?php echo $click; ?>;  
    var data_viewer = <?php echo $viewer; ?>;  
    
    $('#container').highcharts({  
        chart: {  
            type: 'column'  
        },  
        title: {  
            text: 'Yearly Website Ratio'  
        },  
        xAxis: {  
            categories: ['2016','2017','2018', '2019']  
        },  
        yAxis: {  
            title: {  
                text: 'Rate'  
            }  
        },  
        series: [{  
            name: 'Click',  
            data: data_click  
        }, {  
            name: 'View',  
            data: data_viewer  
        }]  
    });  
});  
    
</script>  
    
<div class="container">  
    <br/>  
    <h2 class="text-center"> Highcharts in Codeigniter MYSQL JSON </h2>  
    <div class="row">  
        <div class="col-md-10 col-md-offset-1">  
            <div class="panel panel-default">  
                <div class="panel-heading">Dashboard - Code.candilkuya.com</div>  
                <div class="panel-body">  
                    <div id="container"></div>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
    
</body>  
</html>  

Sekarang kode kita di atas siap dijalankan. Setelah menjalankan ini, output berikut akan dihasilkan:

Demikian Tutorial Cara Membuat Highchart Dinamis di Codeigniter 3 Semoga Bermanfaat.