ittutorial : php tutorial, tutorials for jquery, javascript, ajax and more

Codeigniter Tutorials

Home » Codeigniter »

Table :-

File Name :

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 ;

Table :-

File Name :

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 ;

Controller :-

File Name :

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);
}
}

View :-

File Name :

<!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 - ittutorial.in</div>
<div class="panel-body">
<div id="container"></div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

File Name :

Itechtuto

Codeigniter Tutorials

File Name :

File Name :

File Name :

File Name :

File Name :

File Name :

Connect Us Socially:

Quick Links