หลังจากที่สร้าง Charts แบบธรรมดาไปแล้วที่ https://www.mindphp.com/forums/viewtopic ... 45&t=14359
ทีนี้มาสร้างแบบใช้ Ajax กันบ้าง โดยตัวอย่างแรกจะใช้ Ajax ในการเรียกข้อมูลมาใส่ใน Charts
่ก่อนสร้างต้อง add Script เข้ามาก่อน
โค้ด: เลือกทั้งหมด
$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');
เลือกข้อมูลที่จะนำมาแสดงทันทีที่ตัว select มีการ change
โค้ด: เลือกทั้งหมด
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<script>
var chart;
var options; // ประกาศตัวแปรสำหรับเก็บค่า option ต่างๆ ของ charts
jQuery(document).ready(function() {
options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [] // series ยังไม่ใส่ข้อมูล เพราะจะใช้เรียกจาก Ajax มา
};
jQuery('#data').change(function() { // คำสั่งทำงานเมื่อมีการเปลี่ยนแปลง select
if(this.value == '') {
jQuery('#container').html('');
} else {
// ส่ง Ajax เมื่อมีการเลือกข้อมูลใน select
jQuery.ajax({
// กำหนด url ซึ่ง format ที่ส่งกลับมาจะใช้เป็น json
url: 'index.php?option=com_mcharts&c=test&format=json&id='+this.value,
// เมื่อรับส่งข้อมูลสำเร็จ
success: function(data) {
options.series = []; // กำหนดให้ series ใน options ของ charts เป็นค่าว่าง
jQuery.each(data, function(name, arr_data) {// ดึงข้อมูลใน Object json ออกมา
// ประกาศตัวแปรสำหรับเก็บค่า series
var series = {
data: []
};
series.name = "'" + name + "'"; // กำหนด name ของ series
jQuery.each(arr_data, function(i, value) {
// เก็บค่าของ data ในแต่ละจุด
series.data.push(parseFloat(value));
});
// ส่งค่าเข้าไปใน series options ของ charts
options.series.push(series);
});
// ใส่ค่า options เข้าไปและเรียกใช้งาน Highcharts
chart = new Highcharts.Chart(options);
},
cache: false
});
}
});
});
</script>
Select Data :
<?php
// ส่วนนี้เป็นตัวแสดง select option สำหรับเลือกข้อมูล
$arr_data = array('Tokyo', 'New York', 'Berlin', 'London');
$options = array();
$options[] = JHTML::_('select.option', '', ' - Select - ');
for($i = 0, $loop = count($arr_data); $i < $loop; $i++) {
$options[] = JHTML::_('select.option', $i + 1, $arr_data[$i]);
}
echo JHTML::_('select.genericlist', $options, 'data', '', 'value', 'text');
?>
<!-- tag div ใช้แสดง charts -->
<div id="container"></div>