使用日期范围MYSQL Ajax生成Highchart

时间:2015-08-19 11:32:53

标签: ajax

我正在尝试使用来自MYSQL的数据通过ajax生成条形图,方法是从用户那里获取两个输入日期字段并使用ajax返回结果。
问题是,当我选择日期范围时,它不会#39;告诉我任何事情。
我也是Ajax的新手,所以任何帮助都会受到赞赏 下面是我到目前为止尝试的代码; 感谢

vector

以下是我的std::array文件

<?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>

0 个答案:

没有答案