使用jquery highchart和从mysql datatable获取的动态php值

时间:2013-06-07 18:26:24

标签: php javascript highcharts

我尝试找到一个解释良好的例子或至少是一个定义,但没有运气。 所以基本上我有一个数据表,我想从中获取一些值并使用jquery high-chart显示它。 到目前为止,我有这个:

<?php
include("connect.php"); //script for connecting to database and defining the $connection
$query = "SELECT * FROM meetings";
$result = mysql_query($query, $connection);
$numberOfMeetings = 25; //this is mocked here so you can better understand the code
echo '<table>
      <tbody>';
while ($row = mysql_fetch_array($result)) {
    echo '<tr>';
    echo '<td>' . $row['memberName'] . '</td>';
    echo '<td>' . ($row['timesPresent'] / $numberOfMeetings) * 100 . '%</td>';
    echo '</tr>';
}
?>

我得到一个很好的简单表,有很多行和2列。第一列显示成员的名称,第二列显示他在会议中出现的次数百分比。

我现在的问题是,我有这个数据表和那些值(如果需要,我总是可以将值放在数组中)如何在小提琴上显示它:http://jsfiddle.net/uDrQq/3/

我不知何故需要将类别和数据从php值传递给jquery代码,但是如何?

1 个答案:

答案 0 :(得分:1)

    To use this you have to pass DB values from PHP to Javascript
    use php on same page or get the values from AJAX
    here is the demo how to use on same page

    <?php
    include("connect.php"); //script for connecting to database and defining the $connection
    $query = "SELECT * FROM meetings";
    $result = mysql_query($query, $connection);
    $numberOfMeetings = 25; //this is mocked here so you can better understand the code

    $membername=array();
    $timepresent=array();

    while ($row = mysql_fetch_array($result)) {
        $membername[]=$row['memberName']; 
        $timepresent[]=($row['timesPresent'] / $numberOfMeetings) * 100;
    }

    $membername="'".implode("','", $membername)."'";
    $timepresent=implode(",", $timepresent);

    ?>


//pass values in Javascript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Percentage of members on meetings'
            },
            xAxis: {
                categories: [<?php echo $membername?>],
                title: {
                    text: "Members"
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Percentage',
                    align: 'middle'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
            valueDecimals: 2,
            valueSuffix: ' %'
        },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Present: ',
                data: [<?php echo $timepresent?>]
            }]
        });
    });