How To Use Google Pie Chart Integration Tutorial Using Codeigniter 4 Example

Aug 03, 2021 . Admin

Hello Friends,

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

Here i will give you many example how you can use google pie 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 pie 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->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:

routes/web.php

$routes->setDefaultController('GColumnChartController');
$routes->get('/show-google-charts', '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 pie chart using the google chart js, bootstrap and most importantly the data coming from the database.

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 Use Google Pie Chart Integration Tutorial 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 class="mt-5">
                <div id="GooglePieChart" style="height: 600px; width: 100%"></div>
            </div>
        </div>

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

            google.charts.setOnLoadCallback(drawBarChart);
            
            // Pie Chart
            google.charts.setOnLoadCallback(showBarChart);
            function drawBarChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Day', 'Products Count'], 
                    <?php 
                        foreach ($products as $row){
                           echo "['".$row['day']."',".$row['sell']."],";
                        }
                    ?>
                ]);
                var options = {
                    title: ' Pie chart data',
                    is3D: true,
                };
                var chart = new google.visualization.PieChart(document.getElementById('GooglePieChart'));
                chart.draw(data, options);
            }
        </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...