In this article, we will explain to you how to integrate the google bar & line charts example in Codeigniter 4(Codeigniter 4 Google Bar & Line Charts Example). we can easily integrate the Google bar and line Chart day, week, and month-wise in CodeIgniter 4.
In this example, we are getting day wise data for google bar and line chart from MySQL in Codeigniter 4 and you can also get or use data month wise or weekly wise from MySQL. so you can see our following example.
Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller
Step 6: Create Views Files
Step 7: Run The Application
Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.
Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url
Step 3: Create a Database in table
In this step, We will create the database and products table. so here we have taken some fruits name as products.
CREATE TABLE IF NOT EXISTS `products` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `sales` varchar(255) NOT NULL, `created_at` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; INSERT INTO `products` (`id`, `name`, `sales`, `created_at`) VALUES (1, 'Apple', '2000', '2021-01-02'), (2, 'Mango', '3000', '2021-02-03'), (3, 'Banana', '1000', '2021-03-02'), (4, 'Orange', '2500', '2021-04-05'), (5, 'Apricots', '6000', '2021-05-04'), (6, 'Cherry', '27000', '2021-06-07'), (7, 'Jackfruit', '1600', '2021-07-05'), (8, 'Kiwi', '1200', '2021-08-06'), (9, 'Peach', '1200', '2021-09-02');
Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'ci4_demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'production'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];
Step 5: Create Controller
In this step, we will create the “Chart.php” controller in “app/Controllers” directory.
app/Controllers/Chart.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Chart extends Controller
{
public function __construct()
{
helper(['html','url']);
}
public function index() {
$db = \Config\Database::connect();
$builder = $db->table('products');
$query = $builder->select("COUNT(id) as count, sales, DAYNAME(created_at) as day");
$query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), sales")->get();
$record = $query->getResult();
$productData = [];
foreach($record as $row) {
$productData[] = array(
'day' => $row->day,
'sell' => floatval($row->sales)
);
}
$data['productData'] = ($productData);
return view('index', $data);
}
}
?>
Step 6: Create Views Files
Finally, we will create the index.php in the app/views directory.
app/views/index.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Codeigniter 4 Google Bar & Line Charts Example - XpertPhp</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="mb-5 mt-5"> <div id="GoogleLineChart" style="height: 400px; width: 100%"></div> </div> <div class="mb-5"> <div id="GoogleBarChart" style="height: 400px; width: 100%"></div> </div> </div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {'packages':['corechart', 'bar']}); google.charts.setOnLoadCallback(drawLineChart); google.charts.setOnLoadCallback(drawBarChart); // Line Chart function drawLineChart() { var data = google.visualization.arrayToDataTable([ ['Day', 'Products Count'], <?php foreach ($productData as $row){ echo "['".$row['day']."',".$row['sell']."],"; } ?> ]); var options = { title: 'Line chart product sell wise', curveType: 'function', legend: { position: 'top' } }; var chart = new google.visualization.LineChart(document.getElementById('GoogleLineChart')); chart.draw(data, options); } // Bar Chart google.charts.setOnLoadCallback(showBarChart); function drawBarChart() { var data = google.visualization.arrayToDataTable([ ['Day', 'Products Count'], <?php foreach ($productData as $row){ echo "['".$row['day']."',".$row['sell']."],"; } ?> ]); var options = { title: ' Bar chart products sell wise', is3D: true, }; var chart = new google.visualization.BarChart(document.getElementById('GoogleBarChart')); chart.draw(data, options); } </script> </body> </html>
Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.
php spark serve
Now we will run our example using the below Url in the browser.
http://localhost:8080/chart
If you liked this article, you can also download it through our Github Repository.