How to create Donut and Bar charts in CodeIgniter 3
Hello everyone! My name is Sayyid Ashqar from Indonesia Computer University. This first article of mine will discuss how to create or display data charts using donut and bar formats in CodeIgniter 3.
Charts are very useful tools for showing data in a way that is easy to understand. Two of the most common types of charts are pie charts and bar charts.
Get Sayyid Ashqar’s stories in your inbox
Join Medium for free to get updates from this writer.
A pie chart is a circular chart divided into slices to show how big each part is compared to the whole. Each slice represents a different category of data, making it easy to compare categories. A donut chart is very similar to a pie chart but has a hole in the middle, which gives it a slightly different look.
A bar chart, on the other hand, uses bars to show data. The length or height of each bar represents the value of the data, making it easy to compare different categories or groups. Bar charts are great for showing differences between categories and for displaying data trends over time.
Okay let’s get started.
- Prepare the database, I create the database name as “penjualan_grafik”, you can create the database name as you want.
- Create the table, I named it as “transaksi”, with the structure like below
- You can insert the data on each column for maybe 6 rows like below
- Create a model files in codeigniter 3, mine was named “Grafik_model.php” and insert the code below
<?php
class Grafik_model extends CI_Model
{
public function get_product_count() {
$this->db->select('produk, COUNT(*) as count');
$this->db->group_by('produk');
$query = $this->db->get('transaksi');
return $query->result_array();
}
public function get_daily_totals() {
$this->db->select('tanggal, SUM(total) as total');
$this->db->group_by('tanggal');
$query = $this->db->get('transaksi');
return $query->result_array();
}
}- Create a new Controller, mine was named “Grafik_penjualan.php” and insert the code below
<?php
class Grafik_penjualan extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('Grafik_model'); //load model
}
public function index() {
$daily_totals = $this->Grafik_model->get_daily_totals();
$product_count = $this->Grafik_model->get_product_count();
// Format data for bar chart
$bar_data = [];
foreach ($daily_totals as $row) {
$bar_data[] = [$row['tanggal'], (int)$row['total']]; // Adjust 'tanggal'(date) and 'total' to match the columns in your table
}
// Format data for donut chart
$donut_data = [];
foreach ($product_count as $row) {
$donut_data[] = [
'label' => $row['produk'],
'data' => (int)$row['count'],
'color' => sprintf("#%06X", mt_rand(0, 0xFFFFFF)) // Assign random colors
]; // Adjust 'produk' dan 'count' to match the columns in your table
}
$data['bar_data'] = json_encode($bar_data);
$data['donut_data'] = json_encode($donut_data);
$this->load->view('template/top');
$this->load->view('chart', $data);
$this->load->view('template/bottom');
}
}On the last 3 line that laod view, i took a folder template that i made because i used template from boostrap, so you can change it conditionally for your case.
- Next is the view file, i named it as “chart.php”, and you can sip the code below
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<!-- Donut chart -->
<div class="box box-primary">
<div class="box-header">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Donut Chart</h3>
</div>
<div class="box-body">
<div id="donut-chart" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
</div>
<div class="col-md-6">
<!-- Bar chart -->
<div class="box box-primary">
<div class="box-header">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Bar Chart</h3>
</div>
<div class="box-body">
<div id="bar-chart" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->Note: you can adjust with your own project if you using your own template
- Last thing is the script that important like code below
<script type="text/javascript">
$(function () {
/*
* BAR CHART
* ---------
*/
var barData = <?= $bar_data ?>; // Data from controller
$.plot("#bar-chart", [barData], {
grid: {
borderWidth: 1,
borderColor: "#f3f3f3",
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
barWidth: 0.5,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
/*
* DONUT CHART
* -----------
*/
var donutData = <?= $donut_data ?>; // Data from controller
$.plot("#donut-chart", donutData, {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.5,
label: {
show: true,
radius: 2 / 3,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
</script>And the result must be like this
The use of charts in CodeIgniter 3 can be enhanced by integrating popular chart libraries such as Chart.js or Google Charts.
Overall, using charts in CodeIgniter 3 adds value to visualizing data, enabling users to easily analyze and understand the presented information.
Thank you for your time to read this article. Sorry for the mistake and a bad word or grammar that i made. Greetings!
11022011 — Sayyid Ashqar
Program Studi Komputerisasi Akuntansi
Fakultas Teknik dan Ilmu Komputer
Universitas Komputer Indonesia
