ApexCharts is a powerful JavaScript library designed to create interactive and visually appealing charts. It supports bar, line, pie charts, and more, offering customization, animation, and filtering options for enhanced data visualization. This guide will help you create a dynamic bar chart in CodeIgniter and explore various charts with CodeIgniter.
Table Of Content
1 Prerequisites
1.) PHP version of >= 8.2
2.) Composer
3.) Mysql
2 Introduction
In this tutorial, we will explore how to create a dynamic bar chart in CodeIgniter and visualize user data dynamically. Additionally, we will cover how to implement filter options for better user interaction.
3 How to Integrate ApexChart with Filter Options in CodeIgniter 4
For seeding test data in the users table, use the Seeder class:
php spark make:seeder UserSeeder
Inside the UserSeeder.php file, use the Faker library to generate fake data:
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
use CodeIgniter\I18n\Time;
use App\Models\User;
class UserSeeder extends Seeder
{
public function run()
{
$user = new User;
$faker = \Faker\Factory::create();
for ($i = 0; $i < 100; $i++) {
$user->save(
[
'name' => $faker->name,
'email' => $faker->email,
'created_at' => Time::createFromTimestamp($faker->unixTime()),
'updated_at' => Time::now()
]
);
}
}
}
Run this below command to insert the data.
php spark db:seed UserSeeder
6 Create New Controller - UserController
Handle chart logic in UserController:
php spark make:controller UserController
In app/Controllers/UserController.php, define the index and filterData function:
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\User;
class UserController extends BaseController
{
public function __construct()
{
$this->userModel = new User();
}
public function index() {
$charts=$this->userModel->select("DATE_FORMAT(created_at,'%m') as month,count(*) as sum")->where("DATE_FORMAT(created_at,'%Y')","2024")->groupBy("month")->findAll();
$chart_data=array();
foreach($charts as $chart)
{
$temp=array();
$temp['x']='2024-'.$chart['month'];
$temp['y']=$chart['sum'];
$chart_data[]=$temp;
}
$data['charts']=$chart_data;
return view('index', $data);
}
function filterData()
{
$year=$this->request->getPost('year');
$charts=$this->userModel->select("DATE_FORMAT(created_at,'%m') as month,count(*) as sum")->where("DATE_FORMAT(created_at,'%Y')",$year)->groupBy("month")->findAll();
$chart_data=array();
foreach($charts as $chart)
{
$temp=array();
$temp['x']=$year.'-'.$chart['month'];
$temp['y']=$chart['sum'];
$chart_data[]=$temp;
}
$data['charts']=$chart_data;
echo json_encode($data);
}
}
?>
Access it in your browser:
http://localhost:8080/users
11 Conclusion
You’ve successfully learned how to integrate a dynamic bar chart in CodeIgniter using ApexCharts and implemented filter options to enhance visualization. These charts with CodeIgniter provide interactive, customizable solutions for displaying data efficiently.
