How to Create Google Charts with CodeIgniter and MySQL

Maangatech > Web Design > How to Create Google Charts with CodeIgniter and MySQL


The use of graphics is very common in web applications, and the most commonly used ones are generated using the JavaScript language, combined with a server-side language to provide the data.

In this tutorial, you’ll learn how to integrate google’s graphics library, called Google Charts, with CodeIgniter and MySQL.


  • Codeigniter Framework (I will use V 3 in this tutorial)
  • Code editor

1. Download and install CodeIgniter if you have not done it yet

  • Make sure you create the database and connect it with your Codeigniter.
  • Make sure Database and URL is loaded in autoload

2. Create a table and populate it with Data

By using PHPMyAdmin create the table named Fruits and populate it with data by using the SQL codes below. Here we are creating the table that will hold data for our example.

-- Table structure for table `Fruits` 
  `id` int(10) NOT NULL AUTO_INCREMENT, 
  `fruits_name` varchar(200) DEFAULT NULL, 
  `quantity` int(10) DEFAULT NULL, 
  PRIMARY KEY (`id`) 
-- Dumping data for table `Fruits` 
INSERT INTO `Fruits` (`id`, `fruits_name`, `quantity`) VALUES 
(1, 'Mango', 20), 
(2, 'Pineapple', 50), 
(3, 'Apple', 30), 
(4, 'Banana', 10), 
(5, 'Orange', 25);

3. In Codeigniter navigate to the application/models directory to create a model

Create the new model called Our_chart_model and add the code snippet below. This model will fetch data from the Database

class Our_chart_model extends CI_Model 
    function __construct() 
    //get fruts data 
    public function get_all_fruits() 
        return $this->db->get('Fruits')->result(); 

4. Navigate to application/controllers directory to create Controller

Knowing that you will need two methods in the controller, the first method for loading the view page and the second method will be used to return the JSON data for the JavaScript to render the chart.

So, create the controller named Our_Chart and add the code snippet below. You can modify them according to your preference.

if (!defined('BASEPATH')) exit('No direct script access allowed'); 
class Our_Chart extends CI_Controller 
    function __construct() 
        // $this->load->library('form_validation'); 
    function index() 
    function getdata() 
        $data = $this->Our_chart_model->get_all_fruits(); 
        //         //data to json 
        $responce->cols[] = array( 
            "id" => "", 
            "label" => "Topping", 
            "pattern" => "", 
            "type" => "string" 
        $responce->cols[] = array( 
            "id" => "", 
            "label" => "Total", 
            "pattern" => "", 
            "type" => "number" 
        foreach($data as $cd) 
            $responce->rows[]["c"] = array( 
                    "v" => "$cd->fruits_name", 
                    "f" => null 
                ) , 
                    "v" => (int)$cd->quantity, 
                    "f" => null 
        echo json_encode($responce); 

Data received from Our_chart_model will be used to create JSON data for the google pie chart. In our example, we will add data to the JSON variable by using for each but you can pass other variables from the DB to JSON without using for each statement; this depends on the nature of your data.

5. Next, create the view file

After creating the controller now create the view file named Chart_view and paste the following code snippet below.

<!DOCTYPE html> 
  <title>Google Chart and Codeigniter with MySQL</title> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src=""></script> 
    <script type="text/javascript" src="//"></script> 
    <script type="text/javascript"> 
    // Load the Visualization API and the piechart package. 
    google.charts.load('current', {'packages':['corechart']}); 
    // Set a callback to run when the Google Visualization API is loaded. 
    function drawChart() { 
      var jsonData = $.ajax({ 
          url: "<?php echo base_url() . 'index.php/Our_Chart/getdata' ?>", 
          dataType: "json", 
          async: false 
      // Create our data table out of JSON data loaded from server. 
      var data = new google.visualization.DataTable(jsonData); 
      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
      chart.draw(data, {width: 900, height: 500}); 
h1 { 
    text-align: center; 
    <!--Div that will hold the pie chart--> 
    <h1>Quantity of fruits we have in our store - Displayed by Google Chart and Codeigniter with MySQL</h1> 
    <div id="chart_div"></div> 

The div my-chart will be the container that will receive the chart, and the added scripts are the jQuery library, the Google Chart chart library, and the script that will render the chart when loading the page, respectively.

Now our example is ready, with all the necessary codes. This is just one of the many types of charts that the Google Charts library provides.  You may visit the Google chart home page for more types of charts offered by Google.


Does this example work for you? Do you have an alternative way of achieving this task?

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments