使用Google Chart with PHP MYSQL

Question

我必須顯示一個用戶擁有多少個帳戶和餘額。我必須在一張桌子和一張餅圖上顯示數據。我從Google Chart創建了一個餅圖。但是，我陷入了使用PHP插入餅圖的數據。請幫忙！ :(

<tr> 
         <th>Account Type</th> 
         <th>Account Number</th> 
         <th>Account Balance</th> 
        </tr> 
       </thead> 
        <?php 
        $query = "SELECT * FROM account WHERE user_id='$user_id'"; 
        $result = mysqli_query($link, $query) or die(mysqli_error($link)); 
        while ($row = mysqli_fetch_array($result)) { 
         $acc_type = $row ['account_type']; 
         $acc_num = $row ['account_number']; 
         $acc_bal = $row ['account_balance']; 

         ?> 
        <tbody> 
         <tr> 
          <td><?php echo $acc_type ?></td> 
          <td><?php echo $acc_num ?></td> 
          <td>S$ <?php echo $acc_bal ?></td> 
         <?php 
        } 


        ?> 
         </tr> 
       </tbody> 
       <tr class="alt"> 
        <?php 
        $query = "SELECT SUM(account_balance) AS account_total FROM account WHERE user_id='$user_id'"; 
        $result = mysqli_query($link, $query) or die(mysqli_error($link)); 
        while ($row = mysqli_fetch_array($result)){ 
         $acc_total = $row ['account_total']; 
        ?> 
        <td colspan="2" align="right"><b>Total: </b></td> 
        <td align="right"><b>S$ <?php echo $acc_total ?> </b></td> 
        <?php 
        } 
        ?> 

       </tr> 
      </table> 

       </center> 

    // creating pie Chart 
        <!--Load the AJAX API--> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 

      // Load the Visualization API and the piechart package. 
      google.load('visualization', '1.0', {'packages':['corechart']}); 

      // Set a callback to run when the Google Visualization API is loaded. 
      google.setOnLoadCallback(drawChart); 

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and 
      // draws it. 
      function drawChart() { 

      // Create the data table. (and I think this is where I go wrong) 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Accounts'); 
      data.addColumn('number', 'Balance'); 
      data.addRows([ 

       ['<?php echo $acc_type; ?>', <?php echo $acc_bal; ?>], 
       ['<?php echo $acc_type; ?>', <?php echo $acc_bal; ?>], 
      ]); 

      // Set chart options 
      var options = {'title':'Account Balance', 
          'width':400, 
          'height':300}; 

      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
      } 
     </script> 

     <!--Div that will hold the pie chart--> 
     <div id="chart_div"></div> 

Answer 1

要獲得帳戶類型和結餘的餅圖，你需要一點的代碼添加到您的第一個while循環：

$pieData = array(); 
while ($row = mysqli_fetch_array($result)) { 
    $acc_type = $row ['account_type']; 
    $acc_num = $row ['account_number']; 
    $acc_bal = $row ['account_balance']; 
    $pieData[] = array($row['account_type'], $row['account_balance']); 
    //... 
} 

然後在JavaScript中，輸出$pieData數組：

data.addRows(<?php echo json_encode($pieData, JSON_NUMERIC_CHECK); ?>);