Codeigniter Dynamic Highcharts Example

In this example, i will tech you how to implement highcharts in codeigniter mysql app. we can create bar chart, line chart, pie chart, area chart, column chart, 3d chart, map chart etc using highchart js in codeigniter 3 application.

we will create dynamic column chart from database using highcharts js in codeigniter project. as we know chart is a basic requirement for admin panel. client always want to add chart on his project admin dashboard because we can quickly compare our sales, new users, new subscriber etc using chart. chart is a quick compare with each month, each year etc with graph.

here, we will create create column chart for viewer and click on our website. so we can simple use column chart and compare which month how much visitor on my website and how much click i get on that month. So, here we will create two tables "demo_viewer" and "demo_click" and we will get dynamic from database and then show in chart.

Layout:

Step 1: Create Database Tables

In first step we require to create new database "h_sole", Or you can rename as you like. After creating successfully database, In this example we will show compare column chart of viewer and clicks, So we require to create tables. we require following two tables:

1)demo_viewer

2)demo_click

You can create this two table by following mysql query as like bellow example:

Create demo_viewer table:

CREATE TABLE IF NOT EXISTS `demo_viewer` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `numberofview` int(11) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Create demo_click table:

CREATE TABLE IF NOT EXISTS `demo_click` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `numberofclick` int(12) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Now we require to some dummy data with different year, So you can add like added bellow screen shot, I added both tables with some dummy records that way you can simply add in yout database for testing.

demo_viewer table:

demo_click table:

Step 2: Make database configuration

in second step, we will add database details like username, password and database name. so you can do it from here.

application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'h_sole',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Step 3: Add Route

In this step we need to add one route for render view and chart. so open routes.php file and add code like as bellow:

application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['my-chart'] = "ChartController";

Step 4: Create Controller

In this step we have to create index method with ChartController, in this file we will write code for get data from database.

So, create new method on this controllers folder and put bellow code:

application/controllers/ChartController.php

defined('BASEPATH') OR exit('No direct script access allowed');
   
class ChartController extends CI_Controller {
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    } 
  
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $query = $this->db->query("SELECT SUM(numberofclick) as count FROM demo_click 
            GROUP BY YEAR(created_at) ORDER BY created_at"); 
        $data['click'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);
   
        $query = $this->db->query("SELECT SUM(numberofview) as count FROM demo_viewer 
            GROUP BY YEAR(created_at) ORDER BY created_at"); 
        $data['viewer'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);
   
        $this->load->view('my_chart', $data);
    }
}

Step 5: Create View File

In last step, we have to create view file, we will create new view file "my_chart.php" on views folder and put bellow code on that file.

application/views/my_chart.php

<!DOCTYPE html>
<html>
<head>
	<title>HighChart</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  
<script type="text/javascript">
  
$(function () { 
  
    var data_click = <?php echo $click; ?>;
    var data_viewer = <?php echo $viewer; ?>;
  
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Yearly Website Ratio'
        },
        xAxis: {
            categories: ['2013','2014','2015', '2016']
        },
        yAxis: {
            title: {
                text: 'Rate'
            }
        },
        series: [{
            name: 'Click',
            data: data_click
        }, {
            name: 'View',
            data: data_viewer
        }]
    });
});
  
</script>
  
<div class="container">
	<br/>
	<h2 class="text-center">Codeigniter 3 - Highcharts mysql json example</h2>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard - ItSolutionStuff.com</div>
                <div class="panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
  
</body>
</html>

Now it's all done steps.

You can check demo bellow button.

I hope it can help you...