In this article, we will explain to you how to integrate the morris bar & stacked charts example in Codeigniter 4(Codeigniter 4 Morris Bar & Stacked Charts Examples). we can easily integrate the Morris bar and stacked Charts day, week, and month-wise in CodeIgniter 4.
so we will give you a simple example of how to add morris bar and stacked charts in Codeigniter 4 application.
In this example, we use the morris js library for Charts in Codeigniter 4. here we use the yearly-wise data so you can also get or use data month-wise or weekly-wise from MySQL. so you can see our 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");
$query = $builder->orderBy("sales ASC, day ASC")->get();
$record = $query->getResult();
$data['productData'] = $record;
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 Morris Bar & Stacked Charts Examples - XpertPhp</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> </head> <body> <div class="container"> <div class="mt-5"> <h2 class="text-center mb-5">Codeigniter 4 Morris Stacked Chart Example</h2> <div id="MorrisStakcedChart" style="height: 400px; width: 100%"></div> </div> <div class="mt-5"> <h2 class="text-center mb-5">Codeigniter 4 Morris Bar Chart Example</h2> <div id="MorrisBarChart" style="height: 400px; width: 100%"></div> </div> </div> <!-- Add scripts --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <script> var serries = <?php echo json_encode($productData); ?>; var data = serries, config = { data: <?php echo json_encode($productData); ?>, xkey: 'day', ykeys: ['sales'], labels: ['Sales this week'], fillOpacity: 0.7, hideHover: 'auto', resize: true, behaveLikeLine: true, stacked: true, barColors: "455" }; // Call bar chart config.element = 'MorrisBarChart'; Morris.Bar(config); // Call stacked chart config.element = 'MorrisStakcedChart'; config.stacked = true; Morris.Bar(config); </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.