How To Create Bar Chart In PHP Codeigniter With Chart Js
In this tutorial, we will learn how to draw a bar chart in CodeIgniter using Chart.js. We will fetch monthly data from a MySQL database and use it to create a bar chart using PHP CodeIgniter.
We will also learn how to customize the fonts and tooltips of different charts by using some global configuration options. By the end of this tutorial, you will know how to create different types of charts, such as bar charts, area charts, line charts, and pie charts using Chart.js with PHP CodeIgniter or other frameworks.
Codeigniter Bar Chart Using Chart Js
Contents
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Latest
In this next step, we’re going to download the newest version of Codeigniter. To do this, go to the website Download Codeigniter and get the most up-to-date setup. After you’ve downloaded it, unzip the setup in your local system’s xampp/htdocs/ folder. You can also rename your project folder to whatever you’d like.
Basic Configurations
Now it’s time to do some basic configuration settings on the config.php file. To do this, we’ll navigate to the application/config/config.php file and open it up in a text editor.
set base url like this:-
$config['base_url'] = 'http://localhost/projects/demo/';Create Database With Table
For this next step, we’ll need to create a database with the name “demo” To do this, we’ll open up PHPMyAdmin and create the database with that name. Once it’s successfully created, we can use the following SQL query to create a table in the database.
CREATE TABLE users (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
email varchar(255) NOT NULL COMMENT 'Email Address',
contact_no varchar(50) NOT NULL COMMENT 'Contact No',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
Setup Database Credentials
In the following step, we’ll connect our CRUD app project to the database. To do this, we’ll go to the
application/config/database.php
file and set up our database credentials. In this file, we’ll add our database name, username, and password.
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Create Controller
Now we need to create a controller name Chart.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to fetch the record from database and pass the data to view.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chart extends CI_Controller {
public function __construct() {
parent::__construct();
// load model
$this->load->database();
$this->load->helper(array('url','html','form'));
}
public function bar_chart() {
$query = $this->db->query("SELECT COUNT(id) as count,MONTHNAME(created_at) as month_name FROM users WHERE YEAR(created_at) = '" . date('Y') . "'
GROUP BY YEAR(created_at),MONTH(created_at)");
$record = $query->result();
$data = [];
foreach($record as $row) {
$data['label'][] = $row->month_name;
$data['data'][] = (int) $row->count;
}
$data['chart_data'] = json_encode($data);
$this->load->view('bar_chart',$data);
}
}
?>
In this controller function, we fatch the record from database for showing the data on bar chart.
Create Views
Now we need to create bar_chart.php, go to application/views/ folder and create bar_chart.php file. Here put the below html code for showing data on bar charts.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - bar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="chart-container">
<div class="bar-chart-container">
<canvas id="bar-chart"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
Implement JavaScript Code
Finally we will implement javascript code for showing a data on bar chart. Now we will put the code on script tag after the closing of body tag.
<script>
$(function(){
//get the bar chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var ctx = $("#bar-chart");
//bar chart data
var data = {
labels: cData.label,
datasets: [
{
label: cData.label,
data: cData.data,
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
"#1D7A46",
"#CDA776",
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46",
"#F4A460",
"#CDA776",
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
],
borderWidth: [1, 1, 1, 1, 1,1,1,1, 1, 1, 1,1,1]
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Monthly Registered Users Count",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create bar Chart class object
var chart1 = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
});
</script>
In this script code, we have intialize the chart bar with php codeigniter and set the data on it using chart js.
Start Development Server
For start development server, Go to the browser and hit below the url.
http://localhost/projects/demo/chart/bar_chartConclusion
In this chart js and codeigniter tutorial, We have successfully fetch the last week record from database of the current month and implement on the bar charts using Chart Js.
You Also Like This
