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

Question

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?

Answer 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?>]
            }]
        });
    });