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 http://tenxer.github.io/xcharts/ 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.

Prerequisites

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.

assets_helper.php

 

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

data

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

assets

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

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

4 thoughts on “Codeigniter XChart Example

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.