How To Create Chart Using

Codeigniter and Morris.js

 SEPTEMBER 27, 2018
 Want to know how to create chart using codeigniter and morris.js?

 Then you are in the right place.

 Because today, I will share with you how to create chart using

codeigniter and morris.js step by step.

 Let’s get start it.

 STEP 1. PREPARATION
 This is important!

 If you missed this step, it means you missed the whole of this tutorial.

 Good preparation will determine your success following this tutorial.

The better your preparation, the more likely you will succeed in

following this tutorial.

 Do not skip this step, though it feels complex.

 So, what do you need to prepare?

 Here’s the list:

 1. Codeigniter

 Codeigniter is the main php framework we will use in this tutorial. If

you do not have it yet, please download it at the official

website: www.codeigniter.com

 2. Jquery

 Jquery is a javascript library that serves to help make it easier to

manipulate html elements.

 If you don't have it yet, please download it on the official

website: www.jquery.com

 3. Morris.js

 Morris.js is a javascript library to make it easier to create good-

looking charts.

 If you don't have it yet, please download it on the official

website: http://morrisjs.github.io/morris.js/
  4. Raphael.js

 Morris.js require raphael.js, so, we need raphael.js.

 Please visit the following url to get raphael.js:

 https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js

 Then select all the codes (Ctrl +A) then copy and save with the

name raphael-min.js.

 STEP 2. CREATE DATABASE AND

TABLE
 Create a database named chart_db.

 To create a database, you could executing the following query:

1 CREATE DATABASE chart_db;

 Then create a table named "account" with the structure like the

picture below:
 

 To create a table with a structure like the picture above, you could

executing the following query:

1
CREATE TABLE account(
2 id INT(11) PRIMARY KEY AUTO_INCREMENT,
3 year YEAR(4),

4 purchase INT(11),

5 sale INT(11),

profit INT(11)
6
)ENGINE=INNODB;
7

 STEP 3. INSERT SOME DATA

 Insert some data into the “account” table by executing the following

query:

1 INSERT INTO account (year,purchase,sale,profit) VALUES

2 ('2013','2000','3000','1000'),
3 ('2014','4500','5000','500'),

4 ('2015','3000','4500','1500'),

5 ('2016','2000','3000','1000'),

('2017','2000','4000','2000'),
6
7 ('2018','2200','3000','800'),

8 ('2019','5000','7000','2000');

 The query above will input 7 records data into the ”account” table.

 Like the picture below:

 STEP 4. CODEIGNITER INSTALLATION

 Extract codeigniter that has been downloaded earlier to www folder

(if you use wampserver) or htdocs (if you use XAMPP).

 Because I use wampserver. So, I extract it to c:/wamp/www/

 And then, rename codeigniter project to be chart.

 Like the picture below:



 Open the chart folder and the create new folder

named "assets" parallel to the application and system folders, then

create the css and js folder inside the assets folder.

 And then copy the morris.css file into the css folder and copy

the jquery.min.js, morris.min.js, and raphael-min.js files into

the js folder.

 Pay attention to the following picture for more details:


 STEP 5. CODEIGNITER
CONFIGURATION
 Next step is the configuration on the codeigniter.

 Here are some files you need to configure:

 1. Autoload.php

 To configure the autoload.php, please open the folder:

 application/config/autoload.php

 like this:

 Open autoload.php using text editor like Notepad++ or Sublime Text.

  And then find the code below:

1 $autoload['libraries'] = array();

2 $autoload['helper'] = array();

 Set to be like this:

1 $autoload['libraries'] = array('database');

2 $autoload['helper'] = array('url');

 2. Config.php

 To configure the config.php, please open the folder:

 application/config/config.php

 like the following picture:

 

 Open config.php file using text editor, and then find the code below:

1 $config['base_url'] = '';

 And then set to be like this:

1 $config['base_url'] = 'http://localhost/chart/';

 3. Database.php

 To configure the database.php, please open the folder:

 application/config/database.php

 like the picture below:

 

 Open database.php file using text editor, and then find the code

below:

1 $active_group = 'default';

2 $query_builder = TRUE;

4 $db['default'] = array(

5 'dsn' => '',

'hostname' => 'localhost',

6
'username' => '',
7
'password' => '',
8
'database' => '',
9
'dbdriver' => 'mysqli',
10
'dbprefix' => '',
11 'pconnect' => FALSE,
12 'db_debug' => (ENVIRONMENT !== 'production'),

13 'cache_on' => FALSE,

14 'cachedir' => '',

15 'char_set' => 'utf8',

16 'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

17
'encrypt' => FALSE,
18
'compress' => FALSE,
19
'stricton' => FALSE,
20
'failover' => array(),
21 'save_queries' => TRUE
22 );

23

24

 And then Set to be like this:

1 $active_group = 'default';

$query_builder = TRUE;
2

3
$db['default'] = array(
4
'dsn' => '',
5
'hostname' => 'localhost',
6
'username' => 'root',
7
'password' => '',
8 'database' => 'chart_db',
9 'dbdriver' => 'mysqli',
10 'dbprefix' => '',

11 'pconnect' => FALSE,

12 'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

13
'cachedir' => '',
14
'char_set' => 'utf8',
15
'dbcollat' => 'utf8_general_ci',
16
'swap_pre' => '',
17 'encrypt' => FALSE,
18 'compress' => FALSE,
19 'stricton' => FALSE,

20 'failover' => array(),

'save_queries' => TRUE

21
);
22

23

24

 4. Routes.php

 To configure the routes.php, please open the folder:

 application/config/routes.php

 Like the picture below:

 

 Open routes.php file using text editor, and then find the code below:

1 $route['default_controller'] = 'welcome';

 And then set to be like this:

1 $route['default_controller'] = 'chart';


  STEP 6. MODEL
 The Model represents your data structures. Typically your model

classes will contain functions that help you retrieve, insert, and

update information in your database.

 In this case we just need one model, that is Chart_model.php

 So, create a model file models/Chart_model.php by the following

the code below:

1
<?php
2
class Chart_model extends CI_Model{
3

4 //get data from database

5 function get_data(){

6 $this->db->select('year,purchase,sale,profit');

7 $result = $this->db->get('account');

return $result;
8
}
9

10
}
11

 In the Chart_model model above there is just one function, that

function get_data().

 Function get_data() is used to display all data from the "account"

table in the database.

  In this case, we only display fields: year, purchase, sale, and profit.

 STEP 7. CONTROLLER
 The Controller serves as an intermediary between the Model, the

View, and any other resources needed to process the HTTP request

and generate a web page.

 In this case we just need one controller, that is Chart.php

 So, create a controller file controllers/Chart.php by the following the

code below:

1 <?php

2 class Chart extends CI_Controller{

3 function __construct(){

parent::__construct();
4
//load chart_model from model
5
$this->load->model('chart_model');
6
}
7

8
function index(){
9
$data = $this->chart_model->get_data()->result();
10 $x['data'] = json_encode($data);
11 $this->load->view('chart_view',$x);

12 }

13 }
14

 On the Chart controller above, there are two functions. Function

__connstruct() and function index().

 Function __constrsuct() is used as a constructor, while

the function index() is the function that is called when

the Chart controller is run.

 In the function index(), we call the

function get_data() from Chart_model model.

 Then encoded the output to be JSON object by using

the json_encode method.

 Then load the view "chart_view" by bringing an array "data".

 STEP 8. VIEW
 The View is the information that is being presented to a user.

 A View will normally be a web page, but in CodeIgniter, a view can

also be a page fragment like a header or footer. It can also be an

RSS page, or any other type of “page”.

  In this case we just need one view, that is chart_view.php

 So, create a view file views/chart_view.php by the following the

code below:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5 <title>Chart using codeigniter and morris.js</title>
6 <link rel="stylesheet" href="<?php echo base_url().'assets/css/morris.css'?>">
7 </head>

8 <body>

9 <h2>Chart using Codeigniter and Morris.js</h2>

10
<div id="graph"></div>
11

12
<script src="<?php echo base_url().'assets/js/jquery.min.js'?>"></script>
13
<script src="<?php echo base_url().'assets/js/raphael-min.js'?>"></script>
14
<script src="<?php echo base_url().'assets/js/morris.min.js'?>"></script>
15
<script>
16 Morris.Bar({
17 element: 'graph',
18 data: <?php echo $data;?>,

19 xkey: 'year',

20 ykeys: ['purchase', 'sale', 'profit'],

labels: ['Purchase', 'Sale', 'Profit']

21
});
22
</script>
23
</body>
24
</html>
25
26

 In the view chart_view, we call morris.css, jquery.min.js, raphael-

min.js, and morris.min.js files.

 To call the morris.css file, we use the following code:

1 <link rel="stylesheet" href="<?php echo base_url().'assets/css/morris.css'?>">

 To call the jquery.min.js, raphael-min.js,

and morris.min.js files, we use the following code:

1 <script src="<?php echo base_url().'assets/js/jquery.min.js'?>"></script>

2 <script src="<?php echo base_url().'assets/js/raphael-min.js'?>"></script>

3 <script src="<?php echo base_url().'assets/js/morris.min.js'?>"></script>

 To display a chart, we use the following code:

1
<script>
2
Morris.Bar({
3 element: 'graph',
4 data: <?php echo $data;?>,

5 xkey: 'year',

6 ykeys: ['purchase', 'sale', 'profit'],

labels: ['Purchase', 'Sale', 'Profit']

7
});
8
</script>
9

 The above code will display a bar chart on the graph element. Where

the graph is the ID of an HTML element where the chart wants to be

displayed.
  In this case, I want to display the chart into a div tag that

has id="graph" like the following code:

1 <div id="graph"></div>

 STEP 9. TESTING
 To do the test, please open your browser and type the following URL:

 http://localhost/chart/

 if it's running well, it will look like the following picture:

 Awesome right?

 You can also change the style from the chart above to a line

chart or area chart.

  To change the style of chart, it's quite simple just change the Bar to

be Line.

 Like this:

1
<script>
2
Morris.Bar({
3 element: 'graph',
4 data: <?php echo $data;?>,

5 xkey: 'year',

6 ykeys: ['purchase', 'sale', 'profit'],

labels: ['Purchase', 'Sale', 'Profit']

7
});
8
</script>
9

 Change to be like this:

1
<script>
2
Morris.Line({
3 element: 'graph',
4 data: <?php echo $data;?>,

5 xkey: 'year',

6 ykeys: ['purchase', 'sale', 'profit'],

labels: ['Purchase', 'Sale', 'Profit']

7
});
8
</script>
9

 Then visit the following URL to see the changes:

 http://localhost/chart/
  if it's running well, it will look like the following picture:

 Beside that, You can also change the style to Area chart just by

changing Line to Area.

 Like this:

1
<script>
2
Morris.Area({
3 element: 'graph',
4 data: <?php echo $data;?>,

5 xkey: 'year',

6 ykeys: ['purchase', 'sale', 'profit'],

labels: ['Purchase', 'Sale', 'Profit']

7
});
8
</script>
9

 Then visit the following URL to see the changes:

 http://localhost/chart/
 if it's running well, it will look like the following picture:

 That’s it!.

 CONCLUSION
 In today's tutorial is about how to create a chart with codeigniter and

morris.js.

 In this tutorial, you have learned how to create charts with codeigniter

and morris.js step by step.

 Not only that, you have also learned how to change the style of chart

from bar chart to line chart and chart area.