[joomla 2.5] การสร้าง Charts ด้วย Highcharts บน Joomla แบบธรรมดา
Posted: 13/11/2012 11:37 am
การสร้าง Charts ด้วย Highcharts บน Joomla
ก่อนอื่นดาวน์โหลดตัว Highcharts ได้ที่ http://www.highcharts.com/download
การใช้งาน Highcharts ต้องมี jQuery ด้วย โหลดได้ที่ http://jquery.com/download/
เมื่อโหลดเสร็จแล้วการนำไปใช้งานใน joomla ให้ add Script เข้ามา
อาจจะเอาไว้ในไฟล์ global.php ถ้าใช้งานบ่อย หรือ ถ้าไม่บ่อย ก็ประกาศไว้ใน view.html.php
highcharts.js เป็นตัวหลักในการสร้าง charts ต้องมีการประกาศทุกครั้งที่ใช้ charts
exporting.js เป็นตัวเสริมถ้าอยากให้ print ได้ save ได้ ถึงไม่มีก็แสดง charts ได้
หลังจาก add Script เรียบร้อยแล้ว มาเขียนโค้ดใ้ห้มันแสดงผลได้ ในไฟล์ default.php
การแสดงผล


เมื่อโหลดเสร็จแล้วการนำไปใช้งานใน joomla ให้ add Script เข้ามา
อาจจะเอาไว้ในไฟล์ global.php ถ้าใช้งานบ่อย หรือ ถ้าไม่บ่อย ก็ประกาศไว้ใน view.html.php
Code: Select all
$doc = JFactory::getDocument();
$doc->addScript(JURI::root().'/media/com_mcharts/javascript/jquery-1.7.2.js');
$doc->addScript(JURI::root().'/media/com_mcharts/javascript/highcharts/highcharts.js');
$doc->addScript(JURI::root().'/media/com_mcharts/javascript/highcharts/modules/exporting.js');


หลังจาก add Script เรียบร้อยแล้ว มาเขียนโค้ดใ้ห้มันแสดงผลได้ ในไฟล์ default.php

Code: Select all
<?php
defined('_JEXEC') or die('Restricted access');
?>
<script>
var chart;
jQuery(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', // กำหนด id ของ tag div ที่จะให้ charts แสดงผล
type: 'line' // รูปแบบของ charts มี 4 แบบ ได้แก่ Line Area Column Pie
},
title: {
text: 'Monthly Average Temperature' // กำหนดข้อความบนหัว charts
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// กำหนดหมวดหมู่ หรือ ชื่อใน แกน X แต่ละจุด
},
yAxis: {
title: {
text: 'Temperature (°C)' // กำหนดข้อความในแกน Y
}
},
series: [{ // กำหนดข้อมูลในแต่ละจุดบน charts
name: 'Tokyo', // กำหนดชื่อของเส้นข้อมูลนี้
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
// ข้อมูลในแต่ละจุดของ Tokyo ซึ่งจะสัมพันธ์กับ categories ใน xAxis
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
<!-- สร้าง tag div สำหรับแสดงผลใน charts ตั้ง id ให้ตรงกับ renderTo -->
<div id="container"></div>