Scribd
Upload
22 views

Grafikkkkbackup

5

Uploaded by

callmesamm30
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views

Grafikkkkbackup

5

Uploaded by

callmesamm30
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

view :

<!DOCTYPE html>
<html lang="en">

<?= $this->include('layout/header'); ?>

<body>
<?= $this->include('layout/headbar'); ?>

<!-- ======= Header ======= -->


<!-- End Header -->

<!-- ======= Sidebar ======= -->

<?= $this->include('layout/sidebar'); ?>

<!-- End Sidebar-->

<main id="main" class="main">

<div class="pagetitle">
<h1>Dashboard</h1>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</nav>
</div><!-- End Page Title -->

<section class="section dashboard">


<div class="row">

<!-- Left side columns -->


<div class="col-lg-6">
<div class="row">

<!-- Reports -->


<div class="col-12">
<div class="card">
<!-- dropdown line chart -->
<div class="filter">
<a class="icon" href="#" data-bs-
toggle="dropdown"><i class="bi bi-three-dots"></i></a>
<ul class="dropdown-menu dropdown-menu-end
dropdown-menu-arrow">
<li class="dropdown-header text-start">
<h6>Bulan</h6>
</li>

<li><a class="dropdown-item"
href="#">January</a></li>
<li><a class="dropdown-item"
href="#">February</a></li>
<li><a class="dropdown-item"
href="#">March</a></li>
<li><a class="dropdown-item"
href="#">April</a></li>
<li><a class="dropdown-item"
href="#">May</a></li>
<li><a class="dropdown-item"
href="#">June</a></li>
<li><a class="dropdown-item"
href="#">July</a></li>
<li><a class="dropdown-item"
href="#">August</a></li>
<li><a class="dropdown-item"
href="#">September</a></li>
<li><a class="dropdown-item"
href="#">October</a></li>
<li><a class="dropdown-item"
href="#">November</a></li>
<li><a class="dropdown-item"
href="#">December</a></li>
</ul>
</div>

<div class="card-body">
<h5 class="card-title">Monthly
<span>/Report</span></h5>

<!-- Line Chart -->


<div id="mixedChart"></div>

<script>

document.addEventListener("DOMContentLoaded", () => {
fetch('<?=
base_url('ChartController/getChartData') ?>')
.then(response => response.json())
.then(data => {
if (data && data.dates &&
data.planOrderMonth !== null && data.dailyData) {
console.log(data);

var options = {
series: [{
name: 'Actual',
type: 'column',
data:
data.dailyData.map(item => item.total_konsumsi),
}, {
name: 'Planning',
type: 'line',
data:
Array(data.dates.length).fill(data.planOrderMonth),
}],
chart: {
height: 350,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth:
'50%'
}
},
colors: ['#ff771d',
'#4154f1', '#2eca6a'],
fill: {
opacity: [0.85, 1],
},
labels: data.dates,
markers: {
size: [0, 4]
},
xaxis: {
type: 'category'
},
yaxis: {
min: 0,
max: 1000,
tickAmount: 10,
labels: {
formatter:
function(val) {
return
val.toFixed(1) + ' kg';
}
},
title: {
text: 'Weight
(kg)'
}
},
tooltip: {
shared: true,
intersect: false,
x: {
format:
'dd/MM/yyyy'
},
y: {
formatter:
function(val) {
return
val.toFixed(1) + ' kg';
}
}
}
};

var chart = new


ApexCharts(document.querySelector("#mixedChart"), options);
chart.render();
} else {
console.error('Data yang
diterima tidak valid:', data);
}
});
});
</script>

</div>

</div>
</div><!-- End Reports -->
<!-- End Website Traffic -->

</div><!-- End Right side columns -->

</div>

<!-- grafik hildan -->


<!-- <div class="col-lg-6">
<div class="col-12">
<div class="card recent-sales overflow-auto">

<div class="filter">
<a class="icon" href="#" data-bs-
toggle="dropdown"><i class="bi bi-three-dots"></i></a>
<ul class="dropdown-menu dropdown-menu-end
dropdown-menu-arrow">
<li class="dropdown-header text-start">
<h6>Filter</h6>
</li>

<li><a class="dropdown-item"
href="#">Today</a></li>
<li><a class="dropdown-item" href="#">This
Month</a></li>
<li><a class="dropdown-item" href="#">This
Year</a></li>
</ul>
</div>

<div class="card-body">
<h5 class="card-title">Recent Sales <span>|
Today</span></h5>
<div id="mixedChart"></div>

</div>

</div>
</div>

</div> -->
</section>

</main>
<!-- End #main -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-
center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Vendor JS Files -->


<script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/chart.js/chart.umd.js"></script>
<script src="assets/vendor/echarts/echarts.min.js"></script>
<script src="assets/vendor/quill/quill.min.js"></script>
<script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="assets/vendor/tinymce/tinymce.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>

<!-- Template Main JS File -->


<script src="assets/js/main.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-3.6.0.js"></script>
<script src="assets/js/selectt2.js"></script>
<script src="assets/js/apexchart.js"></script>
<!-- <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></
script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> -->

</body>

</html>

controller :
<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\ChartModel;
use App\Models\UsersDataModel;
use App\Models\UserAccessModel;
use App\Models\UserModel;
use CodeIgniter\Pager\Pager;
use CodeIgniter\API\ResponseTrait;
use App\Models\WorkPlansModel;
use App\Models\KalkulasiPlanningModel;
use App\Models\DailyKonsumsiModel;

class ChartController extends BaseController


{
use ResponseTrait;
protected $usersData;
protected $ChartModel;
protected $workPlansModel;
protected $kalkulasiPlanningModel;
protected $dailyKonsumsi;

public function __construct()


{
$this->usersData = new UsersDataModel();
$this->workPlansModel = new WorkPlansModel();
$this->kalkulasiPlanningModel = new KalkulasiPlanningModel();
$this->dailyKonsumsi = new DailyKonsumsiModel();
}
public function index()
{
$session = session();
if (!$session->get('isLoggedIn')) {
return redirect()->to('/login');
}

// Mengambil ID user yang login


$userId = $session->get('userData')['id_users_account'];

// Mengambil informasi user dari tabel users_account


$userModel = new UserModel();
$user = $userModel->find($userId);

if (!$user) {
return redirect()->to('/profile')->with('error', 'Pengguna tidak
ditemukan.');
}

// Mengambil informasi nama dan jabatan dari tabel users_data


$userDataModel = new UsersDataModel();
$userData = $userDataModel->find($user['users_data_id']);

if (!$userData) {
return redirect()->to('/profile')->with('error', 'Pengguna tidak
ditemukan.');
}

// Simpan data profile ke dalam sesi


$session->set('profileData', $userData);

$lineData = $this->usersData->getLineOptions();
$data = [
'title' => 'CPL',
'lineData' => $lineData,
'user' => $userData,
'userId' => $user
];
return view('dashboard/index', $data);
}

// hari kerja, planning dan actual


public function getChartData()
{
// Mendapatkan tanggal dari tabel work_plans
$workPlans = $this->workPlansModel
->where('tahun', 2024)
->where('bulan', 6)
->findAll();

// Mengambil semua nilai kolom tanggal dari hasil query


$dates = array_column($workPlans, 'tanggal');
// Mendapatkan satu nilai plan_order_month dari tabel kalkulasi_planning
$kalkulasiPlanning = $this->kalkulasiPlanningModel
->where('tahun', 2024)
->where('bulan', 6)
->first(); // Mengambil hanya satu hasil

// Mengambil nilai plan_order_month


$planOrderMonth = $kalkulasiPlanning ?
$kalkulasiPlanning['plan_order_month'] : null;

// Mendapatkan data dari DailyKonsumsiModel


$dailyKonsumsiModel = new DailyKonsumsiModel();
$dailyData = $dailyKonsumsiModel->getData();

// Mengatur data yang akan dikirimkan ke view


$data = [
'dates' => $dates,
'planOrderMonth' => $planOrderMonth,
'dailyData' => $dailyData
];

return $this->respond($data, 200);


}
}

You might also like