In this tutorial, We will learn how to implement highchairs in Codeigniter MySQL app. we can create a bar chart, line chart, pie chart, area chart, column chart, 3d chart, map chart, etc using highchartjs in the Codeigniter 3.


Follow some steps:


Step 1: 

Create Database two tables demo_viewer and demo_click



 demo_viewer:

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 ;



demo_click:

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. you can insert.






Step 2: 

Make database configuration 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 application/config/routes.php

<?php

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

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


Step 4: 

Create Controller 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 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</div>
                <div class="panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
  
</body>
</html>


Now, We need to run our application:

http://localhost/your_project_name/my-chart


Thanks, I hope it will work for you ........