Untitled

<?php
include 'C:\xampp\htdocs\bidding\admin\db_connect.php';

?>
<!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"/>
      <title>Data Visualisation</title>
      <link rel="stylesheet" href="style.css" />
    </head>
   <body>
      <div class="chart">
      <canvas id="myChart"></canvas>
      </div>
      <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
      integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer">
      </script>
       <script src="/bidding/thechart/main.js"></script> -->
   </body>
<?php
//$row = array();
$GraphQuery = "SELECT `bid_amount`, `date_created` FROM `bids`";
$qry=$conn->query($GraphQuery);
if ($qry->num_rows > 0) {
  // output data of each row
  $bids = array();
  $times = array();
  while($row = $qry->fetch_assoc()) {
    //$timefromsql=strtotime($row["date_created"]);
    $bids[] = $row["bid_amount"];
    $times[] = date("G:i",strtotime($row["date_created"]));
    //echo "<br> bid amount: ". $row["bid_amount"]. " - date: ". date("G:i", $timefromsql). " ". "<br>";

  }

}else{
    echo "0 results";
    echo $conn->error;
}
// print_r($bids);
// print_r($times);
$DataInChart = ["bids"=>$bids, "times"=>$times];


        $md = json_encode($DataInChart);
        echo $md;


?>

<script>
   const ctx = document.getElementById("myChart").getContext("2d");

let delayed;

let gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, "rgba(200, 220, 170, 1") ; // R200, G220, B170 - Light Green
gradient.addColorStop(1, "rgba(170, 200, 100, 0.3)"); // R170, G200, b100 - Deep Green


const labels = [
      "1 hr",
    "2 hr",
    "3 hr",
    "4 hr",
    "5 hr",
    "6 hr",
    "7 hr",
    "8 hr",
    "9 hr",
    "10 hr",
];

// $.ajax({
//   url:"charts.php",
//   method:"POST",
//   data:
//   dataType:"JSON",
//   success:function(data){
//     console.log("it's working!"+data);
//   }
// })

const data = {
    ,
    datasets: [{
                // data: [here is the bids values]
                data: [211,335,753,732,659,324,111,341,544,305],
                label: "Bidder #1",
                fill: true,
                backgroundColor: gradient,
                pointBackgroundColor: "#789b3c",
                },
        {
          data: [926,122,798,477,209,190,670,533,610,211],
          label: 'Bidder #2',
        fill: true,
        backgroundColor: "#d9d23c",
        pointBackgroundColor: "#FFFF00",
            },
                ],
                };

const config = {
    type: "line",
    data: data,
    options: {
        radius: 4,
        animation: {
            onComplete: () => {
              delayed = true;
            },
            delay: (context) => {
              let delay = 0;
              if (context.type === 'data' && context.mode === 'default' && !delayed) {
                delay = context.dataIndex * 300 + context.datasetIndex * 100;
              }
              return delay;
            },
          },
    responsive: true,
    scales: {
        y: {
            ticks: {
                callback: function(value){
                    return value + ' SR';
                }
            }
        }
    }

    },
 };

 const myChart = new Chart(ctx, config)
</script>
<!-- </html> -->