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.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on Twitter Facebook  Google Plus Linkedin

16 Replies to “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. 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 ?

  2. I followed the same step but I had not the same resultat nothing is showing just the calendar tools is displayed

      1. Is what I have to modify in the code of viewer to display the data of table I inform you that I am beginner in develepement

        1. The dummy data which attached to this tutorial are very old. so if everything is fine and you want data on the chart then you have to populate tables or select date ranges which fall between dummy data set date ranges.

  3. hey i didn’t found how to load value in your ajax in script.js . Can yo share script.js or jquery/ajax to call controller get_chart_data.

  4. i have updated the dummy data with curent date and following all the step including assets file, but the chart still not showing. Can you help me ?

Leave a Reply

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