การนำข้อมูลจาก MySQL มาแสดงในรูปแบบแผนภูมิด้วย Chart.js
1. สร้างลิงค์เพื่อเรียกไปยังหน้า Controller ที่เตรียมไว้สำหรับแสดงข้อมูลเป็นไฟล์ PDFในที่นี้จะสร้างไปที่หน้าค้นหาและแสดงรายการ list_view.php (กรณีที่ต้องการแสดงในหน้าค้นหาและแสดงรายการ ก็สามารถเขียนโค้ดแทรกลงไปที่ list_view.php ได้เลย ไม่ต้องสร้างลิงค์ไปหน้าอื่น)
2. ในส่วนของ Controller ให้เรียกใช้ Model สำหรับดึงข้อมูลมาแสดง หรือสร้างคำสั่งชั่วคราวเพื่อดึงข้อมูลมาจากฐานข้อมูล MySQL และส่งข้อมูลไปยัง Views ที่เตรียมไว้
3. เพิ่มไฟล์ report_chart.php ซึ่งเป็นส่วนของ Views เพื่อทดสอบการแสดงผล
สังเกตส่วนที่ใช้รับค่าจาก Controller ก็คือตัวแปรที่อยู่ในวงเล็บปีกกา
{student_summary_type}
{student_summary}
4. จะได้ผลลัพธ์ดังนี้
1. สร้างลิงค์เพื่อเรียกไปยังหน้า Controller ที่เตรียมไว้สำหรับแสดงข้อมูลเป็นไฟล์ PDFในที่นี้จะสร้างไปที่หน้าค้นหาและแสดงรายการ list_view.php (กรณีที่ต้องการแสดงในหน้าค้นหาและแสดงรายการ ก็สามารถเขียนโค้ดแทรกลงไปที่ list_view.php ได้เลย ไม่ต้องสร้างลิงค์ไปหน้าอื่น)
<div class="col-sm-12 col-md-12">
<div class="pull-right text-right">
<a href="{page_url}/export_excel" class="btn btn-success btn-lg" data-toggle="tooltip" title="ส่งออกข้อมูล">
<i class="fas fa-file-excel"></i></span> Excel
</a>
<a href="{page_url}/print_pdf" target="_blank" class="btn btn-danger btn-lg" data-toggle="tooltip" title="พิมพ์ข้อมูล">
<i class="fas fa-file-pdf"></i></span> PDF
</a>
<a href="{page_url}/report_chart" target="_blank" class="btn btn-info btn-lg" data-toggle="tooltip" title="รายงานกราฟ">
<i class="fas fa-chart-bar"></i></span> Chart
</a>
</div>
</div>
2. ในส่วนของ Controller ให้เรียกใช้ Model สำหรับดึงข้อมูลมาแสดง หรือสร้างคำสั่งชั่วคราวเพื่อดึงข้อมูลมาจากฐานข้อมูล MySQL และส่งข้อมูลไปยัง Views ที่เตรียมไว้
// create chart
public function report_chart()
{
//ดึงข้อมูลจากฐานข้อมูล
$this->db->select("IF(sex=1,'ชาย','หญิง') AS sex, COUNT(sex) AS amount", FALSE);
$this->db->group_by("sex");
$query = $this->db->get('tb_student');
$student_summary = $query->result_array();
//จัดรูปแบบข้อมูล ยกระหว่าง TITLE / VALUES
$type_name = array_column($student_summary, 'sex');
$amount = array_column($student_summary, 'amount');
$this->data['student_summary_type'] = json_encode($type_name);
$this->data['student_summary'] = json_encode($amount);
$this->parser->parse('demo/student/report_chart', $this->data);
}
3. เพิ่มไฟล์ report_chart.php ซึ่งเป็นส่วนของ Views เพื่อทดสอบการแสดงผล
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Charts</title>
<link href="{base_url}assets/themes/sb-admin-bs4/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap core CSS-->
<link href="{base_url}/assets/module/chart.js/Chart.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-chart-pie"></i>
สถิตินักเรียน</div>
<div class="card-body">
<canvas id="myPieChart" width="100" height="100"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- Page level plugin JavaScript-->
<script src="{base_url}/assets/module/chart.js/Chart.bundle.js"></script>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: {student_summary_type},
datasets: [{
data: {student_summary},
backgroundColor: ['#007bff', '#dc3545', '#ffc107'],
}],
},
});
</script>
</body>
</html>
สังเกตส่วนที่ใช้รับค่าจาก Controller ก็คือตัวแปรที่อยู่ในวงเล็บปีกกา
{student_summary_type}
{student_summary}
4. จะได้ผลลัพธ์ดังนี้
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ความคิดเห็น
แสดงความคิดเห็น