<?php
$con = mysqli_connect("localhost","root","");
$select = mysqli_select_db($con,"ethics_prosperity");

$query = mysqli_query($con,"SELECT COUNT(service_status) AS complete FROM  service_menu where service_status='1'");
$row = mysqli_fetch_array($query);
$complete = $row['complete'];

$query1 = mysqli_query($con,"SELECT COUNT(service_status) AS pending FROM  service_menu where service_status='0'");
$row1 = mysqli_fetch_array($query1);
$pending = $row1['pending'];



?>
<style>
div#dhbor {
    margin-bottom: 30px;
}
h5.dashtit {
    background: white;
    padding: 8px 20px;
    margin-bottom: 0;
    border-bottom: 2px solid #153d77;
    border-radius: 10px 10px 0px 0px;
    font-size: 17px;
}
</style>
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12" id="dhbor">
  <div class="chart-box">
<h5 class="dashtit">Services Status</h5>
    <div class="mx-auto" style="border-radius:20px;">
        <div id="chart_wrap">
        <div class="graph_sec" id="piechart">
        </div>
        </div>
    </div>
</div>

</div>

<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([
         ['Name', 'Count'],
          ['Trash : <?php echo $pending;?>', <?php echo $pending;?>],
          ['Complete : <?php echo $complete;?>', <?php echo $complete;?>]
        ]);

       // Optional; add a title and set the width and height of the chart
  var options = {'title':'', 'height':300};

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

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



<style type="text/css">
    .graph_sec svg>g>text
    {
        display: none;
    }
</style>