เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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
}
 

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');
 

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>