Highchart,Mysql,PHP,带变量的AJAX

时间:2014-10-14 17:12:27

标签: php mysql ajax highcharts

我是PHP和AJAX方法的新手。我需要创建一个具有选择器(下拉菜单)的站点,其中包含客户ID。当用户从菜单中选择客户时,他会立即获得使用Highcharts生成的图表。该图表是带有时间戳的响应时间数据。

那么如何构建一个工作站点,我可以使用来自下拉菜单的变量从我的mysql数据库查询数据?我知道有很多例子,但我无法让那些使用变量的人在mysql查询中。

HTML / Highchart脚本:

<html>
<head>
<title>Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


</head>

<body>
<div id="container" style="height: 300px; width:800px"></div>


<script>
$(function() {
    var DateTimeFS = [];
    var ResponseTime = [];
    var switch1 = true;
    $.get('values.php', function(data) {

        data = data.split('/');
        for (var i in data) {
            if (switch1 == true) {
                DateTimeFS.push(data[i]);
                switch1 = false;
            } else {
                ResponseTime.push(parseFloat(data[i]));
                switch1 = true;
            }

        }

        $('#container').highcharts({

        yAxis: {
            floor: 0,
            title: {
                text: 'Milliseconds'
            }
        },
            xAxis : {
                categories : DateTimeFS,
                tickInterval: 30,
            },
                title: {
                text: 'URL response time'
                },

            series : [{
                name : 'ResponseTime',
                data : ResponseTime 
            }]
        });
    });
}); 
</script>

</body>
</html>

php文件:

<?php

include_once ('dbconnect.php');
$sql = "select TimeStamp,ResponseTime from resulttable where ServiceID= 2";
$result = mysqli_query($con,$sql);

    while($row = mysqli_fetch_array($result)) {
echo $row['TimeStamp'] . "/" . $row['ResponseTime']. "/" ;
    }  
?>

1 个答案:

答案 0 :(得分:1)

这是我使用的图表,其中填充了ajax / php 图表:

<script>
var chart;
    $(document).ready(function() {
     $.getJSON("get_funnel_chart.php", function(json) {
 $('#chart-container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 350
        },
        title: {
            text: 'Sales funnel',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    softConnector: true
                },
                neckWidth: '30%',
                neckHeight: '25%'

                //-- Other available options
                // height: pixels or percent
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Funnel Deals',
            data: json
        }]    
    });  

});
});
</script>

PHP脚本返回值的json编码数组。