HighChart using AJAX, Codeigniter

We know that highchart 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://www.highcharts.com/ for more information.

You can integrate highchart with any server side tehnology but here I will show you how to integrate highchart 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 highchart. 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.

Assets Directory Structure

Final Output

HighChart using AJAX, Codeigniter

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

Dump some data into datatbase table

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

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

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

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

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

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

Step 8. Next create a view with the following code

Step 9. Download the assets directory and put it under project root directory


Step 10. Run the application.

That’s all. Thanks for reading.


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

9 thoughts on “HighChart using AJAX, Codeigniter

    1. The ‘chart’ is the alias for ‘highchartmodel’. If you want you could also use the model name ‘highchartmodel’ without using alias, i.e., $this->load->model(‘highchartmodel’);

  1. When i use Highcharts then my Datatable(jQuery datatable) lost his functionality.. in ci..
    Please help me..

  2. Hey discussion – I am thankful for the analysis , Does anyone know if my assistant would be able to acquire a blank a form form to fill out ?

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.