doudi2229
2013-06-07 18:26 阅读 94
已采纳

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

I tried finding a well explained example or at least a definition, but had no luck. So basically I have a data-table, I want to fetch some values from it and display it using jquery high-chart. So far, I have this:

<?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>';
}
?>

I get a nice simple table with a lot of rows and 2 columns. First column is showing the name of the member and the second one is showing the percentage how many times he has been present on a meeting.

My question is now that I have this data-table and those values (I can always put the values in arrays if needed) how can I display it like this done on the fiddle: http://jsfiddle.net/uDrQq/3/

I somehow need to pass the categories and the data from php values to the jquery code,but how?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    drt3751 drt3751 2013-06-07 18:49
        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?>]
                }]
            });
        });
    
    点赞 评论 复制链接分享

相关推荐