Codeigniter 4 Google Bar & Line Charts Example - Yudhy Network

Share on:

Yudhy Network - Codeigniter 4 google line and bar charts example. In this tutorial, you will learn how to create google line and bar charts in Codeigniter 4 app

Codeigniter 4 google line and bar charts tutorial, In this tutorial, you will learn how to get current month records from day wise MySQL codeigniter 4 app and implement google bar chart and line.

How To Create Google Line & Bar Chart In Codeigniter 4 App

  • Download Codeigniter 4 Project
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

Step 1: Download Codeigniter 4 Project

In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3: Create Table in Database

In this step, you need to create table in database and as well as insert some data to implement an autocomplete search app in codeiginter 4. So visit your phpmyadmin panel and execute the following sql query in it:

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', '[email protected]', '9000000001', '2019-01-01'),
  (2, 'Admin', '[email protected]', '9000000002', '2019-02-01'),
  (3, 'User', '[email protected]', '9000000003', '2018-03-01'),
  (4, 'Editor', '[email protected]', '9000000004', '2019-04-01'),
  (5, 'Writer', '[email protected]', '9000000005', '2017-05-01'),
  (6, 'Contact', '[email protected]', '9000000006', '2019-06-01'),
  (7, 'Manager', '[email protected]', '9000000007', '2019-07-01'),
  (8, 'John', '[email protected]', '9000000055', '2016-08-01'),
  (9, 'Merry', '[email protected]', '9000000088', '2019-09-01'),
  (10, 'Keliv', '[email protected]', '9000550088', '2019-10-01'),
  (11, 'Herry', '[email protected]', '9050550088', '2019-11-01'),
  (12, 'Mark', '[email protected]', '9050550998', '2019-12-01');

Step 4: Setup Database Credentials

In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => '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, Visit app/Controllers and create a controller name GoogleCharts.php. In this controller, you need to add the following methods into it:

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;


class GoogleCharts extends Controller
{

    public function index() {

        $db      = \Config\Database::connect();
        $builder = $db->table('users');   

        $query = $builder->query("SELECT COUNT(id) as count,DAY(created_at) as day_date FROM users WHERE MONTH(created_at) = '" . date('m') . "'
        AND YEAR(created_at) = '" . date('Y') . "'
      GROUP BY DAY(created_at)");

      $data['day_wise'] = $query->getResult();
        
	    return ('home',$data);
    }

}

Step 6: Create View

In this step, you need to create one view files name home.php and update the following code into your file:

<!Doctype html>
<html>
<head>
  <title>Google Date Wise Bar and Line Chart Codeigniter Tutorial</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
  <script type="text/javascript">
      google.charts.load('visualization', "1", {
          packages: ['corechart']
      });
  </script>
</head>
<body>
<div class="row">
  <div class="col-md-12">
    <div id="line_date_wise" style="width: 900px; height: 500px; margin: 0 auto"></div>
    <div id="bar_date_wise" style="width: 900px; height: 500px; margin: 0 auto"></div>
  </div>  
</div>
</body>
</html>

Implement Javascript code

Finally, need to implement javascript code for showing a data on google bar chart. Now we will put the code on script tag after the closing of body tag.

<script language="JavaScript">
  // Draw the pie chart for registered users month wise
  google.charts.setOnLoadCallback(lineChart);

  // Draw the pie chart for registered users year wise
  google.charts.setOnLoadCallback(barChart);
  
  //for
  function lineChart() {

        /* Define the chart to be drawn.*/
        var data = google.visualization.arrayToDataTable([
            ['Date', 'Users Count'],
            <?php 
             foreach ($day_wise as $row){
             echo "['".$row->day_date."',".$row->count."],";
             }
             ?>
        ]);

        var options = {
          title: 'Day Wise Registered Users Of Line Chart',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        /* Instantiate and draw the chart.*/
        var chart = new google.visualization.LineChart(document.getElementById('line_date_wise'));
        chart.draw(data, options);
  }
  // for
  function barChart() {

    /* Define the chart to be drawn.*/
    var data = google.visualization.arrayToDataTable([
        ['Date', 'Users Count'],
        <?php 
         foreach ($day_wise as $row){
         echo "['".$row->day_date."',".$row->count."],";
         }
         ?>
    ]);
    var options = {
        title: 'Date wise Registered Users Bar Chart',
        is3D: true,
    };
    /* Instantiate and draw the chart.*/
    var chart = new google.visualization.BarChart(document.getElementById('bar_date_wise'));
    chart.draw(data, options);
  }
</script>

Step 7: Create Route

In this step, you need to create a route that renders the table into the view, place the following code in app/Config/Routes.php file.

$routes->get('/', 'GoogleCharts::index');

Step 8: Start Development Server

In this step, open your terminal and execute the following command to start development sever:

php spark serve

Then, Go to the browser and hit below the URL:

http://localhost:8080

Conclusion

In this codeigniter google bar and line charts tutorial, you have successfully got the record from a database and display it on the google line and bar charts in codeigniter 4 app.

If you have any questions or thoughts to share, use the comment form below to reach us.

Recommended CodeIgniter 4 Tutorial

Recommended:- CodeIgniter 4 jQuery Form Validation Example
Recommended:- CodeIgniter 4 Ajax Form Submit Validation Example
Recommended:- CodeIgniter 4 Image Upload With Preview Example
Recommended:- CodeIgniter 4 Pagination Example Tutorial
Recommended:- Codeigniter 4 Ajax Image Upload with Preview Example
Recommended:- Codeigniter 4 PDF Generator Tutorial Example
Recommended:- CodeIgniter 4 First Crud Example Tutorial
Recommended:- CodeIgniter 4 Rest Api Example Tutorial
Recommended:- Codeigniter 4 Login And Registration Tutorial Example
Recommended:- Send Email in CodeIgniter 4 With SMTP
Recommended:- CodeIgniter 4 Ajax Crud with datatables and Bootstrap Modals
Recommended:- Crop and Save Image using jQuery Coppie in Codeigniter 4
Recommended:- Codeigniter 4 Load More Data on Page Scroll using jQuery Ajax
Recommended:- Codeigniter 4 Google Map Multiple Markers Example
Recommended:- Codeigniter 4 Dynamic Dependent Dropdown with Ajax
Recommended:- Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS
Recommended:- Codeigniter 4 Get Latitude and Longitude From Address

Please ask in the comments!

Suport : Cotekno.Com

comments powered by Disqus