Pie chart from google with data from database not showing up

Question

I am currently using google pie chart for my data analytics for my table called stylists.

When I tried apply the google pie chart and also put in my query for getting the rowlist, it showed nothing. I want to achieve getting the row of user_type and verification_status thus, shown in the pie graph will be a graph of only verified or not verified.

This is my php file

<!DOCTYPE html>
<html lang="en">
<head>
<!--Chart script from google-->
    <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([
          ['stylist_type', 'verification_status'],

         <?php 
            $dbhandle = new mysqli("","","","");
            $queryPie = "SELECT * FROM stylist";
            $pieResult = $dbhandle->query($queryPie);
 //I KNOW THE PROBLEM IS HERE BUT I REALLY THINK I JUST DID IT RIGHT, NEED HELP MUCH
         while($row=$pieResult->fetch_assoc()){
             echo "['".$row['user_type']."',".$row['verification_status']."],";
         }
         ?>
        ]);

        var options = {
          title: 'Stylist Classifications'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link rel="icon" href="isalonlogo.png">

<!-- Bootstrap -->
<link href="css2/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
   </head>
   <body>

     <div  id="piechart" style="width: 900px; height: 500px;"></div>




</body>

I created a mock result object that would return some associative arrays with the necessary keys and this code worked for me (produced a chart). It seems the problem is probably in the query execution. Try setting up your connection to throw PHP exceptions on MySQL errors and see what the problem is. https://stackoverflow.com/questions/22662488/how-to-get-mysqli-error-information-in-different-environments — Don't Panic, Mar 04 '19 at 21:58
i dont know why but even with just putting ?> inside it gets off the chart (nothing shown even the label "no data shown" from the js). — shiela mekelele, Mar 04 '19 at 22:04
Hmm, do you see the php code if you view the page source, by any chance? I'm wondering if it's not being executed for some reason. And any errors in the browser console? — Don't Panic, Mar 04 '19 at 22:08
Sir the problem is now solved. it was just with some query errors and now I got it all right! thanks for helping me out and opening my eye til morning! :D cheers and have a good day ahead! — shiela mekelele, Mar 04 '19 at 22:28

Pie chart from google with data from database not showing up

0 Answers0