Codeigniter 4 Morris Bar & Stacked Charts Examples

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');

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,
	];

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);     
	}
 
}

?>

<?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/bootstrap@5.0.2/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>

<!DOCTYPE html>

<head>

<title>Codeigniter 4 Morris Bar & Stacked Charts Examples - XpertPhp</title>

</head>

<body>

<h2 class="text-center mb-5">Codeigniter 4 Morris Stacked Chart Example</h2>

</div>

<h2 class="text-center mb-5">Codeigniter 4 Morris Bar Chart Example</h2>

</div>

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

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/chart

1	http://localhost:8080/chart

If you liked this article, you can also download it through our Github Repository.