Использование Google Chart с PHP MYSQL

Question

Мне нужно показать, сколько учетных записей и баланс у пользователя 1. Мне нужно показать данные на таблице и круговой диаграмме. Я создал круговую диаграмму из 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

Чтобы получить PieChart типов счетов и балансов, вам нужно добавить немного кода в ваш первый время цикла:

$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); ?>);