Untitled

<?php
$servername = "localhost";
$username = "pi";
$password = "raspberry";
$dbname = "pi";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM data ORDER BY TempsScan DESC LIMIT 10";
$result = $conn->query($sql);
$temps = array();
$temperatures = array();
$motion = array();
$distance = array();
while($row = $result->fetch_assoc()) {
$temps[] = $row['TempsScan'];
$temperatures[] = $row['Temperatures'];
$motion[] = $row['motion'];
//$distance = $row['distance'];
}

?>
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></s                                                                                                                                                             cript>
</head>
<body>
<div style="width:30%">
<div>

        <canvas id="line-temp" width="1200" height="800"></canvas>
        <canvas id="line-motion" width="1200" height="800"></canvas>
</div>
</div>
<script>
  new Chart(document.getElementById("line-temp"), {
    type: 'line',
    data: {
      labels: <?php echo json_encode(array_reverse($temps)) ?>,
      datasets: [{
          data: <?php echo json_encode(array_reverse($temperatures)) ?>,
          label: "Temperatures",
          borderColor: "#3d56ae",
          fill: true
        }
  ]
    },
    options: {
      title: {
        display: true,
        text: 'Temperatures maggle'
      }
    }
  });

  new Chart(document.getElementById("line-motion"), {
    type: 'line',
    data: {
      labels: <?php echo json_encode(array_reverse($temps)) ?>,
      datasets: [{
          data: <?php echo json_encode(array_reverse($motion)) ?>,
          label: "Motion Detection",
          borderColor: "#4e934f",
          fill: true
        }
  ]
    },
    options: {
      title: {
        display: true,
        text: 'Motion maggle'
      }
    }
  });

    new Chart(document.getElementById("line-distance"), {
    type: 'line',
    data: {
      labels: <?php echo json_encode($temps) ?>,
      datasets: [{
          data: <?php echo json_encode($distance) ?>,
          label: "Distance",
          borderColor: "#4e934f",
          fill: true
        }
  ]
    },
    options: {
      title: {
        display: true,
        text: ''
      }
    }
  });


</script>
</body>
</html>