Google column chart using Codeigniter

We know that Google chart basically displays different statistical data on different chart types such as column chart, bar chart, line chart, pie chart etc. You can have a look at the URL for more information.

In my previous tutorial the year value was always showing as 2k for 2010, 2011, 2012 etc. Now I have updated the code a little bit so that it will show the exact year on horizontal axis.

You can integrate Google chart with any server side technology but here I will show you how to integrate Google chart with Codeigniter. This tutorial shows step by step so that we can understand how it happens. It displays the data for Company Performance for last five years in bar(column) chart. You can also use other charts for any purpose. In this example I have used data coming from database. You can change the source of data as per your requirements.

If you have any query please feel free to leave a comment.

    Netbeans 8.1
    XAMPP in Windows
    Codeigniter 3.0.6

Configure XAMPP and Netbeans

From Netbeans IDE go to Tools->Options. Click on PHP. Now on tab “General” browse the file for “PHP 5 Interpreter”. The php interpreter file generally placed inside the <physical drive in Windows OS>:xamppphpphp.exe

Configure Codeigniter and Netbeans

Create a new PHP project in Netbeans. Then remove the index.php file from the newly created project. Now copy the extracted files from Codeigniter 3.0.6 to the newly created project directory.

Directory Structure

A typical directory structure for the project would be as shown below. Here assests directory will contain static resources like css, js, images.

codeigniter join

Final Output

When Chart rendered on view

google column chart

When you mouse hover on Chart slices

google column chart

Now we will see how it happens step by step.

Step 1. Now modify <root directory>/application/config/autoload.php file for auto-loading html, url, file, form and session

Step 2. Now modify <root directory>/application/config/config.php file to define encryption key

Step 3. Go to location ci/application/config/database.php file and change database parameter values for below parameters

Step 4. Create a MySQL table in “cdcol” database

Step 5. Dump some values into database table – performance

Step 6. Create a model file chartmodel.php under ci/application/models directory with the below source code

Step 7. Create a controller file chartcontroller.php under ci/application/controllers with the following source code

Step 8. Create a view file line_chart.php under ci/application/views

Step 9. Modify file ci/application/config/routes.php file

Step 10. If everything is fine then run the application. You will get the output in the browser.

That’s all. Thanks for reading.

One Reply to “Google column chart using Codeigniter”

Leave a Reply

Your email address will not be published. Required fields are marked *