[joomla 2.5] การสร้าง Charts ด้วย Highcharts บน Joomla แบบ Ajax

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 11605
Joined: 18/04/2012 9:39 am

[joomla 2.5] การสร้าง Charts ด้วย Highcharts บน Joomla แบบ Ajax

Post by tsukasaz » 13/11/2012 1:33 pm

การสร้าง Charts ด้วย Highcharts บน Joomla แบบ Ajax

หลังจากที่สร้าง Charts แบบธรรมดาไปแล้วที่ https://www.mindphp.com/forums/viewtopic ... 45&t=14359
ทีนี้มาสร้างแบบใช้ Ajax กันบ้าง โดยตัวอย่างแรกจะใช้ Ajax ในการเรียกข้อมูลมาใส่ใน Charts

่ก่อนสร้างต้อง add Script เข้ามาก่อน

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');
 
มาเขียนโค้ดในไฟล์ default.php ครับ ในตัวอย่างจะเป็นตัว select option
เลือกข้อมูลที่จะนำมาแสดงทันทีที่ตัว select มีการ change

Code: Select all

<?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>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 11605
Joined: 18/04/2012 9:39 am

Re: [joomla 2.5] การสร้าง Charts ด้วย Highcharts บน Joomla แบบ Ajax

Post by tsukasaz » 13/11/2012 1:46 pm

ต่อจากด้านบนจะเห็นว่า Ajax ส่งค่า id ออกไปและรับค่าเป็น json กลับมา
มาดูโค้ดส่วนที่ส่งค่า json ออกไปในไฟล์ view.json.php

Code: Select all

function display($tpl = null) { 
        $id = JRequest::getVar('id'); // รับค่า id ที่ส่งมาจาก Ajax
        $data = '';
        // กำหนดค่าให้ตัวแปร $data ตามเงื่อนไขต่างๆ
        if($id == 1) {
            $data['Tokyo'] = array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6);
        } else if($id == 2) {
            $data['New York'] = array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5);
        } else if($id == 3) {
            $data['Berlin'] = array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0);
        } else if($id == 4) {
            $data['London'] = array(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8);
        }
        
        $document =& JFactory::getDocument();
        $document->setMimeEncoding('application/json'); // กำหนดการเข้ารหัสของไฟล์
        
        JResponse::setHeader('Content-type','text/json'); // กำหนดประเภทของเนื้อหา
        echo json_encode($data); // แสดงข้อมูล $data ที่แปลงเป็น json
}
 
การแสดงผล
Attachments
การแสดงผล charts แบบ ajax
การแสดงผล charts แบบ ajax
ex_charts.JPG (15.5 KiB) Viewed 278 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Post Reply

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 23 guests