使用from date range MYSQL Ajax生成Highchart_Ajax

使用from date range MYSQL Ajax生成Highchart

ajax

使用from date range MYSQL Ajax生成Highchart,ajax,Ajax,我试图通过ajax从MYSQL获取两个输入日期字段并使用ajax返回结果，从而使用数据生成一个条形图。问题是，当我选择日期范围时，它不会显示任何内容。我也是阿贾克斯新手，因此任何帮助都将不胜感激。下面是我迄今为止尝试过的代码；谢谢你的JSON看起来怎么样？你的JSON看起来怎么样？ <?php $cakeDescription = "Highcharts Pie Chart"; ?> <!DOCTYPE HTML> <html> <hea

我试图通过ajax从MYSQL获取两个输入日期字段并使用ajax返回结果，从而使用数据生成一个条形图。
问题是，当我选择日期范围时，它不会显示任何内容。
我也是阿贾克斯新手，因此任何帮助都将不胜感激。
下面是我迄今为止尝试过的代码；谢谢

你的JSON看起来怎么样？你的JSON看起来怎么样？

<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title><?php echo $cakeDescription ?></title>
        <link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //default
                var startdate = document.getElementById('startdate').value;
                var enddate = document.getElementById('enddate').value;

                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'Highcharts Chart PHP with MySQL Example',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Sumber : Jabatan XYZ',
                        x: -20
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Jumlah Pelawat'
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        shadow: true
                    },
                    series: []
                };
                function getAjaxData(startdate,enddate) {
                    $.getJSON("data.php", function(json) {
                        options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
                        options.series[0] = json[1];                        
                        chart = new Highcharts.Chart(options);
                    });
                }

            });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

    </head>
    <body>
        <a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
        <div class="menu_top" >
            <input  type="date" id="startdate" name="startddate">
            <input  type="date" id="enddate" name="enddate">
        </div>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
    </body>
</html>

<?php

#Basic Line
require '../../conn/connection.php';

$id = $_GET['id'];

$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];

$result = mysql_query("SELECT DISTINCT(membername), COUNT(membername)
AS member 
FROM responses WHERE timerecorded>=" . $startdate . " AND timerecorded<=" . $enddate . " GROUP BY membername");


$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
    $bln['data'][] = $r['membername'];
    $rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

mysql_close($con);