Codeigniter XChart Example

We know that xchart 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.

You can integrate xchart with any server side tehnology but here I will show you how to integrate xchart with Codeigniter framework. This tutorial shows step by step so that we can understand how it happens. It displays the data for site visitors log in line chart. I have also put a calendar for date-picker so that you can pick a custom range of dates and get the visitor statistics in xchart. The calendar has more features like you can select Yesterday, Last One week, Last One month etc. On mouse hover on the line chart you can see the visitors count on a particular date.

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


Knowledge of PHP & Codeigniter, jQuery and AJAX
MySQL 5.x
Apache HTTP server 2.2
Codeigniter 2.1.4

Assets folder structure

You need to create assets folder in parallel to application folder for putting all asset files such as js, css, images etc.

Codeigniter Highchart

Final Output

Calendar – date picker

Codeigniter Hichchart example

When no record found for a date or date range

Codeigniter Hichchart example

When record(s) is/are found for a date or date range

Codeigniter Hichchart example

Step 1. First thing is we need to create database tables

The below site_log table holds the information for visitor statistics


The below session table holds session information for each client


Step 2. Once you have codeigniter framework setup in place then configure database settings at location application/config/database.php


Step 3. Modify the config.php file at location application/config/config.php. I am not using index.php file in URL so you can go through tutorial how to remove index.php from URL in Codeigniter


Step 4. Create a assets helper file which gives us the URL for different assets like css, js etc.



Step 5. Modify the config.php file at location application/config/autoload.php


Step 6. Create a model which will give us the data for the chart under application/models/highchart_model.php. The below model file is pretty simple.


Step 7. Now create one controller called Highchart under application/controller/highchart.php with below code


Step 8. Now modify the application/config/routes.php file as follows

Step 9. Next create a view with the following code


Step 10. Run the application.

You can download the sample data for table site_log


Please download all the files for css and js from here.


Thanks for your reading. Please do not forget to leave a comment.

5 Replies to “Codeigniter XChart Example”

Leave a Reply

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