My 'GoogleChart Pie' shows only thin slices

When I echo data to my Pie Chart only thin slices will be shown with a percentage of 1% and 0.2%. Which, obviously, is not the 100% it should show. I have tried all kind of combinations but w/o any luck. See the example here: https://i.sstatic.net/F2j8X.jpg

My code:

<?php
  include "config.php";
           
  $query = "SELECT COUNT(CASE WHEN Success = '1' THEN 1 ELSE NULL END) AS Successes, COUNT(CASE WHEN Success = '0' AND EndTime > '1970-01-01 00:00:00' THEN 1 ELSE NULL END) AS Failures, COUNT(CASE WHEN Success = '0' AND EndTime = '1970-01-01 00:00:00' THEN 1 ELSE NULL END) As Incompletes, COUNT(*) AS Total FROM DiskOperationLog";

 $result = mysqli_query($dbhandle, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>
  <meta http-equiv="refresh" content="300">
  <title>WipeDrive Dashboard</title>
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
           <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
           <script type="text/javascript">  
           google.charts.load('current', {'packages':['corechart']});  
           google.charts.setOnLoadCallback(drawChart);  
           function drawChart()  
           {  
                var data = google.visualization.arrayToDataTable([  
                   ['Success', 'Fail'],
                                             
                          <?php  
                         while($row = mysqli_fetch_array($result)) {   
                         echo "['Successes', '$row[0]'], ['Failures', '$row[1]']";
                           }  
                           ?>  
          
                     ]);  
                var options = {  
                      title: 'Wipe Results',
                      pieSliceText: 'value-and-percentage',
                      slices: {0: {color: '#1bbd0e'}, 1:{color: '#ff3333'}}, 
                      is3D:true,  
                     };  

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
                chart.draw(data, options);  
           }  
           </script>  
      </head>  
      <body>  
           <br /><br />  
           <div style="width:900px;">  
                <h3 align="left">WipeDrive Dashboard</h3>  
                <br />  
                <div id="piechart" style="width: 755px; height: 375px;"></div>  
           </div>  
      </body>  
 </html>

Assuming the cause is in the 'echo' line I have tried all I could think off in here.

The ones below give the right chart, but the name and value are the same, which are both the amount. So if the values are 179 and 33, the pie is divided correctly but instead of having "Successes" and "Failures" as names the numbers (179 & 33) are there.

echo "['".$row["Successes"]."', ".$row[0]."],";
echo "['".$row["Failures"]."', ".$row[1]."],";

If I echo below, the chart does show 100% and it looks like it is working. So I guess adding the 2nd value is the issue here and I miss an important step/function/option.

echo "['Successes', '$row[0]']";

Thanks in advance!

Solution

According to the documentation, you are misusing google.visualization.arrayToDataTable.

Besides, you don't need to use a loop since you always have exactly one row.

The following should initialize your data variable correctly:

<?php $row = mysqli_fetch_array($result); ?>
var data = google.visualization.arrayToDataTable([
  [
    {label: 'Outcome', type: 'string'},
    {label: 'Count', type: 'number'},
  ],
  ['Success', parseInt('<?php echo $row[0]; ?>')],
  ['Fail', parseInt('<?php echo $row[1]; ?>')]
]);

If short open tags are activated, you may use <?= $row[0] ?> instead of <?php echo $row[0]; ?>.