Morris Area & Line Chart With Codeigniter Example
In this tutorial, you will learn how to use Codeigniter to create area and line charts using Morris JS. We will show you how to get data from MySQL database for the current month and year, and use it to create the charts.
We will be fetching data for every day of the current month from our database where users have registered. You can check out our demo link at the end of the article.
We will be using Morris JS to create the area and line charts in Codeigniter. Morris JS can also be used to create other types of charts like bar chart, pie chart, and stacked bar chart.
Codeigniter Morris Area & Line Charts
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
Next, we need to create a database called “demo”. To create the database, open PHPMyAdmin and create a new database with the name “demo”. Once you have created the database, you can use the following SQL query to create a table in your 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;
INSERT INTO users (id, name, email, contact_no, created_at) VALUES
(1, 'Team', 'info@test.com', '9000000001', '2023-01-01'),
(2, 'Admin', 'admin@test.com', '9000000002', '2023-01-02'),
(3, 'User', 'user@test.com', '9000000003', '2023-01-03'),
(4, 'Editor', 'editor@test.com', '9000000004', '2023-01-04'),
(5, 'Writer', 'writer@test.com', '9000000005', '2023-01-05'),
(6, 'Contact', 'contact@test.com', '9000000006', '2023-01-06'),
(7, 'Manager', 'manager@test.com', '9000000007', '2023-01-07'),
(8, 'John', 'john@test.com', '9000000055', '2023-01-08'),
(9, 'Merry', 'merry@test.com', '9000000088', '2023-01-09'),
(10, 'Keliv', 'kelvin@test.com', '9000550088', '2023-01-10'),
(11, 'Herry', 'herry@test.com', '9050550088', '2023-01-11'),
(12, 'Mark', 'mark@test.com', '9050550998', '2023-01-12');
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$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 morris_area_line_chart() {
// for area and line chart
$dayQuery = $this->db->query("SELECT DAY(created_at) as y, COUNT(id) as a FROM users WHERE MONTH(created_at) = '" . date('m') . "'
AND YEAR(created_at) = '" . date('Y') . "'
GROUP BY DAY(created_at)");
$record = $dayQuery->result();
$data['chart_data'] = json_encode( $record );
//print_r($data['chart_data']);die;
$this->load->view('morris_line_area_chart',$data);
}
}
?>
In this controller function, we fatch the record from database for showing the data on morris stacked and bar charts.
Create Views
Now we need to create morris_line_area_chart.php, go to application/views/ folder and create morris_line_area_chart.php file. Here put the below html code for showing data on pie charts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Morris.js Bar and Stacked Chart With Codeigniter - Torque Programming</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
</head>
<body>
<h3 class="text-primary text-center">
Morris charts with Codeigniter
</h3>
<div class="row">
<div class="col-sm-12 text-center">
<label class="label label-success">Line Chart</label>
<div id="line-chart"></div>
</div>
<div class="col-sm-12 text-center">
<label class="label label-success">Area Chart</label>
<div id="area-chart"></div>
</div>
</div>
</body>
</html>
Implement JavaScript Code
Finally we will implement javascript code for showing a data on morris stacked and bar charts. Now we will put the code on script tag after the closing of body tag.
<script>
var serries = JSON.parse(`<?php echo $chart_data; ?>`);
console.log(serries);
var data = serries,
config = {
data: data,
xkey: "y",
ykeys: ["a"],
labels: ["Current Month Date Wise Total Registered Users"],
fillOpacity: 0.6,
hideHover: "auto",
behaveLikeLine: true,
resize: true,
pointFillColors: ["#ffffff"],
pointStrokeColors: ["black"],
lineColors: ["gray", "red"],
};
config.element = "area-chart";
Morris.Area(config);
config.element = "line-chart";
Morris.Line(config);
</script>
In this script code, we have intialize the morris stacked and bar charts with php codeigniter and set the data on it.
Start Development Server
For start development server, Go to the browser and hit below the url.
http://localhost/projects/demo/chart/morris_line_area_chartConclusion
In this Codeigniter tutorial, we were able to fetch data from the database for each day of the month and display it on area and line charts using Morris JS. It was a successful process!
You May Also Like
