วิธีการสร้างกราฟจากข้อมูลใน 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
ตรวจสอบว่าไฟล์ทั้ง 2 ถูกเรียกแล้ว และสามารถใช้งานได้ วิธีการเช็คกด F12 ที่เว็บเบราว์เซอร์แล้วดูแท็ป Network คลิกดู CSS กับ JS ได้
ต่อไปเตรียมข้อมูลสำหรับแสดงบนกราฟ ซึ่งข้อมูลจะใช้ดึงจากฐานข้อมูล
ตัวอย่างข้อมูล
ให้สร้าง 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; // ส่งค่าออกไป
}
หลังจากสร้าง function ในส่วน Model เสร็จแล้ว ให้เรียกใช้ในส่วน View ไฟล์ view.html.php ตั้งตัวแปรมารับค่าที่ได้จาก function
โค้ด: เลือกทั้งหมด
$this->chart = $this->get('ChartData'); // เรียกใช้ function ใน model ชื่อ getChartData
และในไฟล์ default.php ให้เขียนคำสั่ง Javascript สำหรับแสดงกราฟ ซึ่งการใส่คำสั่ง Javascript ใน Component จะไม่ได้ใส่ลงไปตรงๆ
จะใช้คำสั่ง $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)."]}],
});
});");
เพิ่มคำสั่ง HTML สำหรับแสดงผล
ผลที่ได้
[img]http://quantlabs.net/blog/wp-content/uploads/2015/12/highcharts-logo.png[/img]
[color=#0000BF][size=150][b]วิธีการสร้างกราฟจากข้อมูลใน Component ด้วย Highcharts[/b][/size][/color]
:idea: สามารถอ่านบทความ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/36-Jquery/2397-jquery-%E0%B8%97%E0%B8%B3%E0%B8%81%E0%B8%A3%E0%B8%B2%E0%B8%9F-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-highcharts.html]สร้างกราฟ ด้วย Highcharts Jquery Javascript Graph[/url] เพื่อทำความรู้จักก่อน
:!: [color=#0000BF][b]สิ่งที่ต้องเตรียม[/b][/color]
- Component ใน Joomla ที่มีข้อมูลพร้อมดึงมาแสดง
- ตัว Highcharts เวอร์ชั่นล่าสุด ดาวน์โหลดได้ที่ https://www.highcharts.com/download
(ในตัวอย่างนี้จะใช้เวอร์ชั่น 6.0.7)
:arrow: [color=#0000BF][b]ขั้นตอนการสร้างกราฟ[/b][/color]
หลังจากดาวน์โหลดเสร็จแล้ว จะได้ไฟล์ zip ซึ่งไฟล์ที่เราจะใช้แบบง่ายที่สุด ใช้แค่ 2 ไฟล์ คือ [b]highcharts.css[/b] กับ [b]highcharts.js[/b]
ให้เอาไปไว้ใน component ที่จะใช้งาน
[u][b]ตัวอย่าง[/b][/u] สร้างโฟลเดอร์ชื่อ assets สำหรับเก็บไฟล์ javascript css และ images เอา 2 ไฟล์นี้ ไปใส่ไว้
[img]http://snap.mindphp.com/index.php?view=2018Feb28_5a9646c4e0b4a[/img]
เรียกใช้ไฟล์ [b]highcharts.css[/b] กับ [b]highcharts.js[/b] ในส่วน View ที่ต้องการแสดงกราฟ
คำสั่งสำหรับเรียกไฟล์ ([color=#FF0000]ถ้าจะ copy อย่าลืมแก้ไขข้อมูลให้ถูกต้องก่อน[/color])[code=php]$doc = Joomla\CMS\Factory::getDocument();
$doc->addScript('ใส่ URL ของไฟล์ javascript'); // เรียกไฟล์ javascript
$doc->addStyleSheet('ใส่ URL ของไฟล์ css'); // เรียกไฟล์ css [/code]
ตรวจสอบว่าไฟล์ทั้ง 2 ถูกเรียกแล้ว และสามารถใช้งานได้ วิธีการเช็คกด F12 ที่เว็บเบราว์เซอร์แล้วดูแท็ป Network คลิกดู CSS กับ JS ได้
[img]http://snap.mindphp.com/index.php?view=2018Feb28_5a964a51277e3[/img]
ต่อไปเตรียมข้อมูลสำหรับแสดงบนกราฟ ซึ่งข้อมูลจะใช้ดึงจากฐานข้อมูล
[u]ตัวอย่างข้อมูล[/u]
[img]http://snap.mindphp.com/index.php?view=2018Feb28_5a964ddd88904[/img]
ให้สร้าง function สำหรับดึงข้อมูลในส่วน Model และจัดข้อมูลให้อยู่ในรูปแบบที่นำไปใช้ง่ายที่สุด[code=php]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; // ส่งค่าออกไป
}[/code]
หลังจากสร้าง function ในส่วน Model เสร็จแล้ว ให้เรียกใช้ในส่วน View ไฟล์ view.html.php ตั้งตัวแปรมารับค่าที่ได้จาก function [code=php]$this->chart = $this->get('ChartData'); // เรียกใช้ function ใน model ชื่อ getChartData [/code]
และในไฟล์ default.php ให้เขียนคำสั่ง Javascript สำหรับแสดงกราฟ ซึ่งการใส่คำสั่ง Javascript ใน Component จะไม่ได้ใส่ลงไปตรงๆ
จะใช้คำสั่ง $doc->addScriptDeclaration('คำสั่ง Javascript'); (ใส่ต่อจากขั้นตอนที่สองได้เลย ย้อนกลับไปดูขั้นตอนที่สอง)[code=php]$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)."]}],
});
});");[/code]
เพิ่มคำสั่ง HTML สำหรับแสดงผล [code]<div id="show_highchart"></div>[/code]
ผลที่ได้
[img]http://snap.mindphp.com/index.php?view=2018Feb28_5a9656f4b80b8[/img]