CodeIgniter 4 Google Pie Chart Integration Tutorial

Google provides a JavaScript library that allows developers to integrate it into applications to create pie charts using G Chart JS.

Let’s start creating a pie chart using the google chart js library:

Step 1: Set Up CodeIgniter Project

Download CodeIgniter 4 from the official website, And extract the downloaded file and move the extracted folder to your web server’s root directory (e.g., htdocs or www).

Step 2: Set Up Database

Edit .app/Config/Database.php file, and setup database details in it:

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'your_username',
    'password' => 'your_password',
    'database' => 'your_database',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
];

Step 3: Create a Controller

Run the following command to create controller file:

php spark make:controller Chart

In app/Controllers/Chart.php file, create some methods to fetch data from table and pass it to the view:

<?php

namespace App\Controllers;

use App\Models\ActivityModel;
use CodeIgniter\Controller;

class Chart extends Controller
{
    public function index()
    {
        $activityModel = new ActivityModel();
        $activities = $activityModel->findAll();

        // Prepare data for the chart
        $chartData = [['Task', 'Hours per Day']];
        foreach ($activities as $activity) {
            $chartData[] = [$activity['activity'], (int)$activity['hours']];
        }

        $data['chartData'] = $chartData;

        return view('chart_view', $data);
    }
}

Step 4: Create a Model

Run the following command to create model file for activities table:

php spark make:model ActivityModel

In app/Models/ActivityModel.php, define the model:

<?php

namespace App\Models;

use CodeIgniter\Model;

class ActivityModel extends Model
{
    protected $table = 'activities';
    protected $primaryKey = 'id';
    protected $allowedFields = ['activity', 'hours'];
}

Step 5: Create Pie Chart View

In the app/Views directory, create a new view file chart_view.php file:

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter 4 Google Pie Chart Integration Tutorial - ItcodStuff.com</title>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Step 6: Add Google Chart JS Library in View

In the app/Views directory, add google chart js library and function in view file:

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

        function drawChart() {
            var data = google.visualization.arrayToDataTable(<?= json_encode($chartData) ?>);

            var options = {
                title: 'My Daily Activities'
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>

Step 7: Test Application

Type the url http://localhost:8080/chart on browser for test the application.