<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
</head>
<body>






<?php 
include('conn.php');
  $query = "select month , SUM(total)  FROM orders GROUP BY month ORDER BY month desc LIMIT 31 ";
  $res = $conn->query($query);


  foreach($res as $data)
  {

    $month[] =  $data['month'];
    $amount[] = $data['SUM(total)'];
  }
  echo basename($_SERVER['PHP_SELF']);
?>


<div style="width: 100%; background:white">
  <canvas id="myChart"></canvas>
</div>
 
<script>
  // === include 'setup' then 'config' above ===
  const labels = <?php echo json_encode($month) ?>;
  const data = {
    labels: labels,
    datasets: [{
      label: 'Sales by month',
      data: <?php echo json_encode($amount)?>,
      backgroundColor: [
      
        'rgb(54, 162, 235)'
     
      ],
     
      borderWidth: 1
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
      scaleLabel:"%" ,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    },
  };

  var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

</script>

</body>
</html>