簡體   English   中英

從MySQL獲取JSON到Google Charts

[英]Getting JSON from MySQL into Google Charts

我正在嘗試使用其示例和MySQL表中的一些數據填充基本的Google區域圖表。 這是我所擁有的:

    <?php 
    include("inc/DBConn.php");
    $link = connectToDB();

    $query = "SELECT MONTH(checkout) as Checkout, COUNT(item_id) as BookCount FROM C_books WHERE YEAR(checkout) = 2012 GROUP BY MONTH(created) ASC";
    $result = mysql_query($query) or die(mysql_error());
    while ($row = mysql_fetch_assoc($result)) {
        $numBooks[] = $row;
        };
    $chartData = json_encode($numBooks,JSON_NUMERIC_CHECK);
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable(<?php echo $chartData; ?>,false);

    var options = {
      title: 'Total Books',
      hAxis: {title: 'Month',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

這是我的回聲結果:

    [{"Checkout":"3","BookCount":"19"},{"Checkout":"4","BookCount":"157"},{"Checkout":"5","BookCount":"30"},{"Checkout":"6","BookCount":"45"},{"Checkout":"7","BookCount":"688"},{"Checkout":"8","BookCount":"391"}]

我知道Google不喜歡這樣,但是我不明白如何設置它的格式,從而做到這一點???

$numBooks[] = array("Checkout", "BookCount");
while ($row = mysql_fetch_array($result)) {
        $numBooks[] = $row;
};

以所需格式顯示數據

以下是我使用SQL->數組-> Google DataTable JSON字符串的方法(我沒有引用其他人的操作方式,因此可能會有更好的編碼方式)。 注意$ task_submissions_arr與行和列填充從數據庫查詢的陣列(但低於未示出)

<?php
    // array to be converted to json string and used in google chart's bar chart
    $bar_chart_cols_arr = array( 
                                array('id' => 'Name', 'label' => 'Name', 'type' => 'string'), 
                                array('id' => 'Auto Grading Marks', 'label' => 'Auto Grading Marks', 'type' => 'number'), 
                                array('id' => 'Manual Grading Marks', 'label' => 'Manual Grading Marks', 'type' => 'number'));
    // array to be converted to json string and used in google chart's bar chart
    $bar_chart_rows_arr = array(); 
    for($i=0; $i<count($task_submissions_arr); $i++){
        // array nesting is complex owing to to google charts api
        array_push($bar_chart_rows_arr, array('c' => array(
                                                            array('v' => $task_submissions_arr[$i]['name']), 
                                                            array('v' => $task_submissions_arr[$i]['auto_grading_marks']), 
                                                            array('v' => $task_submissions_arr[$i]['manual_grading_marks'])))  );
    }
?>

<script type="text/javascript">
        google.setOnLoadCallback(draw_bar_chart);
        function draw_bar_chart() {
            var bar_chart_data = new google.visualization.DataTable(
            {
                cols: <?php echo json_encode($bar_chart_cols_arr); ?>, 
                rows: <?php echo json_encode($bar_chart_rows_arr); ?>
            });
// to be continued...
</script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM