<!DOCTYPE html>
<html>
<script src="charts.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:100%; "></canvas>

<script>

    <?php include "inc/config.php" ;

$sql = "SELECT * FROM covers where Period = 'MONTHLY' ";    
$result = mysqli_query($conn,$sql); $rowcount=mysqli_num_rows($result);
$x = $rowcount;

$sql_1 = "SELECT * FROM covers  where Period = 'ANNUALLY' ";    
$result_1 = mysqli_query($conn,$sql_1); $rowcount_1=mysqli_num_rows($result_1);
$y = $rowcount_1;    
 
$sql_2 = "SELECT * FROM covers  where Period = 'ANNUALLY (INSTALLMENT)' ";    
$result_2 = mysqli_query($conn,$sql_2); $rowcount_2=mysqli_num_rows($result_2);
$z = $rowcount_2;  

$sql_3 = "SELECT * FROM covers  where Period = 'SEMI - ANNUALLY' ";    
$result_3 = mysqli_query($conn,$sql_3); $rowcount_3=mysqli_num_rows($result_3);
$w = $rowcount_3; 

    $dataPoints = array( 
      array("y" => "$x" ),
      array("y" => "$y" ),
      array("y" => "$z" ),
      array("y" => "$w" ),
    );
     
     
    ?>


var xValues = ["Monthly", "Annually", "With Installments", "Semi-annually"];

var yValues = [ 
                <?php echo $x; ?>,  
                <?php echo $y; ?>, 
                <?php echo $z; ?>,
                <?php echo $w; ?>
       ];


var barColors = [
  "#b91d47",
  "#00aba9",
  "#2b5797",
  "#e8c3b9",
  "#1e7145"
];

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},

    title: {
      display: false,
      text: "World Wide Wine Production 2018"
    }
  }
});
</script>

</body>
</html>
