How To Create Simple Bar Chart In Codeigniter Using AmCharts?

AmCharts using Codeigniter. In this article, we will explain to you how to Create Bar Chart In Codeigniter using AmCharts. today we will get data into MySQL.and create charts, plot a bar graph.

There are many types of charts provide by AmCharts, like a bar chart, area chart, line chart, pie chart, amcharts line chart, etc. but here we use a bar chart. very easy to create amcharts line chart.

We can easily integrate AmCharts Codeigniter. here In this article, we are using AmCharts version 3. so you can see below the following steps.

How To Create Simple Bar Chart In Codeigniter Using AmCharts?

Create Dynamic Pie Chart In Codeigniter using AmChart

Step 1: Create a Database in table
Step 2: Connect to Database
Step 3: Create Controller
Step 4: Create View File

Step 1: Create Database In Table

In this step, we have to create a table in the database, so we will create a database using the below code.

CREATE TABLE `login_history` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `login_date` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;

Step 2: Connect To Database

This step Goes to the config folder and opens the database.php file some changes.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'database name',
	'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
);

Step 3: Create Controller

We will create an Amchart.php file in the “application/controller” directory and paste the below code in this controller. here we will fetch the last 10 data from the database count login users. that data will be pass in an Amchart and creating bar graphs with amcharts examples.

application/controller/Amchart.php

<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Amchart 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 DATE_FORMAT(login_date, "%Y-%m-%d") AS `date`, COUNT(`login_date`) as count FROM login_history WHERE `login_date` >= NOW() - INTERVAL 10 MONTH GROUP BY MONTH(`login_date`) ORDER BY `login_date` ASC'); 
      $records = $query->result_array();
      $data = [];
      foreach($records as $row) {
		$data[] = ['date' => date('Y-m-t',strtotime($row['date'])), 'count' =>$row['count']];
      }
      $data['chart_data'] = json_encode($data);
      $this->load->view('bar_chart',$data);
    }   
}
?>

Step 4: Create View File

We will create the bar_chart.php file in the “application/views/” directory.

application/views/bar_chart.php

<!DOCTYPE html>
<html>
	<head>
		<title>Create Dynamic Pie Chart In Codeigniter using AmChart - phpcodingstuff.com</title>
		<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
		<script src="https://www.amcharts.com/lib/3/serial.js"></script>
		<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
		<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
		<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
	</head>
	<body>
		<div id="chartdiv" style="width: 900px; height: 800px;"></div>
		<script>
		var chartData = JSON.parse(`<?php echo $chart_data; ?>`);
            try {
				  var chart = AmCharts.makeChart( "chartdiv", {
				  "type": "serial",
				  "theme":"light",
				  "dataProvider": chartData,
				  "valueAxes": [ {
					"gridColor": "#FFFFFF",
					"gridAlpha": 0.2,
					"dashLength": 0
				  } ],
				  "gridAboveGraphs": true,
				  "startDuration": 1,
				  "graphs": [ {
					"balloonText": "[[category]]: <b>[[value]]</b>",
					"fillAlphas": 0.8,
					"lineAlpha": 0.2,
					"type": "column",
					"valueField": "count"
				  } ],
				  "chartScrollbar": {
					"graph": "g1",
					"scrollbarHeight": 60,
					"backgroundAlpha": 0,
					"selectedBackgroundAlpha": 0.1,
					"selectedBackgroundColor": "#888888",
					"graphFillAlpha": 0,
					"graphLineAlpha": 0.5,
					"selectedGraphFillAlpha": 0,
					"selectedGraphLineAlpha": 1,
					"autoGridCount": true,
					"color": "#AAAAAA",
					"oppositeAxis": false
                    },
				  "chartCursor": {
					"categoryBalloonEnabled": false,
					"cursorAlpha": 0,
					"zoomable": false
				  },
				  "categoryField": "date",
				  "categoryAxis": {
					"gridPosition": "start",
					"gridAlpha": 0,
					"tickPosition": "start",
					"tickLength": 20
				  },
				  "export": {
					"enabled": true
				  }
				} );           
            }
            catch( e ) {
              console.log( e );
            }
		</script>		
	</body>
</html>

I hope it can help you...

Codeigniter Php

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.