วิธีการสร้างกราฟจากข้อมูลใน Component ด้วย Highcharts
สามารถอ่านบทความ สร้างกราฟ ด้วย Highcharts Jquery Javascript Graph เพื่อทำความรู้จักก่อน
สิ่งที่ต้องเตรียม
- Component ใน Joomla ที่มีข้อมูลพร้อมดึงมาแสดง
- ตัว Highcharts เวอร์ชั่นล่าสุด ดาวน์โหลดได้ที่ https://www.highcharts.com/download
(ในตัวอย่างนี้จะใช้เวอร์ชั่น 6.0.7)
ขั้นตอนการสร้างกราฟ
หลังจากดาวน์โหลดเสร็จแล้ว จะได้ไฟล์ zip ซึ่งไฟล์ที่เราจะใช้แบบง่ายที่สุด ใช้แค่ 2 ไฟล์ คือ highcharts.css กับ highcharts.js
ให้เอาไปไว้ใน component ที่จะใช้งาน
ตัวอย่าง สร้างโฟลเดอร์ชื่อ assets สำหรับเก็บไฟล์ javascript css และ images เอา 2 ไฟล์นี้ ไปใส่ไว้
เรียกใช้ไฟล์ highcharts.css กับ highcharts.js ในส่วน View ที่ต้องการแสดงกราฟ
คำสั่งสำหรับเรียกไฟล์ (ถ้าจะ copy อย่าลืมแก้ไขข้อมูลให้ถูกต้องก่อน)
โค้ด: เลือกทั้งหมด
$doc = Joomla\CMS\Factory::getDocument();
$doc->addScript('ใส่ URL ของไฟล์ javascript'); // เรียกไฟล์ javascript
$doc->addStyleSheet('ใส่ URL ของไฟล์ css'); // เรียกไฟล์ css
ต่อไปเตรียมข้อมูลสำหรับแสดงบนกราฟ ซึ่งข้อมูลจะใช้ดึงจากฐานข้อมูล
ตัวอย่างข้อมูล
ให้สร้าง function สำหรับดึงข้อมูลในส่วน Model และจัดข้อมูลให้อยู่ในรูปแบบที่นำไปใช้ง่ายที่สุด
โค้ด: เลือกทั้งหมด
public function getChartData()
{
$db = $this->getDbo(); // เรียก Object สำหรับเชื่อมต่อฐานข้อมูล
$query = $db->getQuery(true) // เรียก Object สำหรับใช้คำสั่ง SQL
->select('name, age') // เลือกข้อมูลที่จะใช้แสดงบนกราฟ
->from('#__highchart_hello'); // ตารางที่ดึงข้อมูล
$db->setQuery($query); // ส่งคำสั่ง SQL ไปประมวลผล
$items = $db->loadObjectList(); // ดึงข้อมูลตามคำสั่งที่ส่งไปประมวลผล ข้อมูลที่ดึงจะเป็นรูปแบบ Object หลายๆ แถว
$arr_chart_data = array(); // ตั้งตัวแปรสำหรับเก็บข้อมูลที่จัดใหม่ เป็น array
foreach ($items as $item) // วนลูปข้อมูลที่ได้จากฐานข้อมูล
{
$category = "'".$item->name."'"; // เนื่องจากชนิดของข้อมูล name เป็น String ซึ่งต้องเอาไปใช้ใน javascript จึงต้องใส่ ' (Single Quote)
$arr_chart_data[$category] = $item->age; // กำหนด name เป็น key และ age เป็น value ของ array
}
return $arr_chart_data; // ส่งค่าออกไป
}
โค้ด: เลือกทั้งหมด
$this->chart = $this->get('ChartData'); // เรียกใช้ function ใน model ชื่อ getChartData
จะใช้คำสั่ง $doc->addScriptDeclaration('คำสั่ง Javascript'); (ใส่ต่อจากขั้นตอนที่สองได้เลย ย้อนกลับไปดูขั้นตอนที่สอง)
โค้ด: เลือกทั้งหมด
$doc->addScriptDeclaration("
jQuery(function($) {
Highcharts.chart('show_highchart', {
chart: {
type: 'column'
},
title: {
text: 'TEST Highcharts'
},
subtitle: {
text: 'Source: mindphp.com'
},
xAxis: {
categories: [".implode(',', array_keys($this->chart))."],
},
yAxis: {
title: {
text: 'Years'
}
},
series: [{name: 'Age', data: [".implode(',', $this->chart)."]}],
});
});");
โค้ด: เลือกทั้งหมด
<div id="show_highchart"></div>