How To Google Column Charts Integration Tutorial Using Codeigniter 4 Example

Aug 09, 2021 . Admin

Hello Friends,

Now let's see example of how to use google column chart integration in codeigniter 4. This is a short guide on codeigniter 4 if google column chart integration. We will use how to use google column chart integration using in codeigniter 4. Here you will learn how to use google column chart integration in codeigniter 4. We will use how to use if google column chart integration using codeigniter 4. Let's get started with how to google column chart integration use in codeigniter 4.

Here i will give you many example how you can use google column chart integration in codeigniter 4.

Step 1: Download Codeigniter Project

we require to download or install codeigniter project, it can install in a two ways, so first fire bellow command:

<?php
    https://codeigniter.com/download
    or
    composer create-project codeigniter4/appstarter project_name
?>
Step 2: Connect App to Database

Open the app/Config/Database.php and insert data like database name, username and password into the file.

Path: app/Config/Database.php

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'codeigniter_db',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'development'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
];
Step 3: Create Table & Insert Data

In this is step we need to create a new table and insert few record.

CREATE TABLE `product` (
  `id` int(11) NOT NULL COMMENT 'Primary Key',
  `name` varchar(255) NOT NULL COMMENT 'name',
  `sell` varchar(55) NOT NULL COMMENT 'sell',    
  `created_at` varchar(30) NOT NULL COMMENT 'created at'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='Atomic database';

INSERT INTO `product` (`id`, `name`, `sell`, `created_at`) VALUES
(1, 'Coca Cola', '5000', '2021-05-01'),
(2, 'Pepsi', '7000', '2021-05-02'),
(3, 'Coke Zero', '19000', '2021-05-03'),
(4, 'Pepsi Max', '1500', '2021-05-04'),
(5, 'Diet Coke', '19000', '2021-05-05'),
(6, 'Pepsi Light', '3000', '2021-05-06'),
(7, 'Gatorade', '22000', '2021-05-07');
Step 4: Create Controller

If you haven't GColumnChartController then we should create new controller as GColumnChartController in this path app/Http/Controllers/GColumnChartController.php. Make sure you should have product table with some data. this controller will manage data and google column chart data and view file, so put bellow content in controller file:

Path: app/Http/Controllers/GColumnChartController.php

<?php
 
namespace App\Controllers;
use CodeIgniter\Controller;

class GColumnChartController extends Controller
{

    public function index() {
        return view('chart');
    }
    
    public function initChart() {
        
        $db = \Config\Database::connect();
        $builder = $db->table('product');

        $query = $builder->select("COUNT(id) as count, sell as s, DAYNAME(created_at) as day");
        $query = $builder->orderBy("s ASC, day ASC");
        $query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), s")->get();
        $record = $query->getResult();

        $products = [];
        foreach($record as $row) {
            $products[] = array(
                'day'   => $row->day,
                'sell' => floatval($row->s)
            );
        }
        
        $data['products'] = ($products);    
        return view('chart', $data);               
    }
}
Step 5: Add Route

In this step, we have to add route in route file, so go to bellow path and put bellow code:

Path: routes/web.php

$routes->setDefaultController('GColumnChartController');
$routes->get('/google-column-chart', 'GColumnChartController::initChart');
Step 6: View File

Now, We need to add some code into the view file for display some data, where we can constitute the column chart using the google chart js, bootstrap and most importantly the data coming from the database.

Path: app/Views/chart.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How To Google Column Charts Integration Using Codeigniter 4 Example - MyWebtuts.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
    <body>
        <div class="container">
            <div id="GoogleColumnChart" style="height: 500px; width: 100%"></div>
        </div>

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
            google.charts.load('visualization', "1", {
                packages: ['corechart']
            });

            function showChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Day', 'Products Count'], 
                    <?php 
                        foreach($products as $row) {
                            echo "['".$row['day']."',".$row['sell']."],";
                        } 
                    ?>
                ]);

                var options = {
                    title: 'Last week sales',
                    isStacked: true
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('GoogleColumnChart'));
                chart.draw(data, options);
            }
            google.charts.setOnLoadCallback(showChart);
        </script>
    </body>
</html>
Step 7: Run Application

In this last step, you have to open the terminal and enter following command to run the application.

php spark serve

Next go to the browser and run the following url.

http://localhost:8080/show-google-charts

It will help you....

#Codeigniter

You might also like...