Untitled

<?php

$servername = "localhost";

// REPLACE with your Database name
$dbname = "pzem_data";
// REPLACE with Database user
$username = "xxxxxxxxxxxx";
// REPLACE with Database user password
$password = "xxxxxxxxxxxx";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, value1, value2, reading_time FROM Sensor order by reading_time desc limit 40";

$result = $conn->query($sql);

while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
}

$readings_time = array_column($sensor_data, 'reading_time');

// ******* Uncomment to convert readings time array to your timezone ********
$i = 0;
foreach ($readings_time as $reading){
    // Uncomment to set timezone to - 1 hour (you can change 1 to any number)
    $readings_time[$i] = date("d/m/Y  H:i:s", strtotime("$reading + 0 hours"));
    // Uncomment to set timezone to + 4 hours (you can change 4 to any number)
    //$readings_time[$i] = date("Y-m-d H:i:s", strtotime("$reading + 4 hours"));
    $i += 1;
}

$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$value2 = json_encode(array_reverse(array_column($sensor_data, 'value2')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);

/*echo $value1;
echo $value2;
echo $value3;
echo $reading_time;*/

$result->free();
$conn->close();
?>

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=2">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      min-width: 310px;
      max-width: 1920px;
    }
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
  </style>
  <body>
    <div id="chart-temperature" class="container"></div>
<script>

var value1 = <?php echo $value1; ?>;
var value2 = <?php echo $value2; ?>;
var reading_time = <?php echo $reading_time; ?>;

var chartT = new Highcharts.Chart({
  chart:{
    height: 900,
    renderTo : 'chart-temperature'
  },
  title: {
    text: 'Letture Contatori Appartamenti'
  },
  series: [{
    data: value1,
    name: 'Piano Terra'
  }, {
    data: value2,
    name: 'Piano Primo'
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    }
  },
  legend: {
    layout: 'vertical',
    floating: true,
    backgroundColor: '#FCFFC5',
    borderColor: '#C98657',
    borderWidth: 1,
    align: 'left',
    verticalAlign: 'top',
    y: 60,
    x: 90
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: "%e. %b",
      month: "%b '%y",
      year: "%Y"
    },
    categories: reading_time,
    labels: {
      rotation: -45
    }
  },
  yAxis: {
    title: { text: 'Energia (kWh)' }
  },
  credits: { enabled: false }
});

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