index

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="60" >
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="top_banner"> Været i Solbyveien <a href="config.php"><img src="gear.png" width=30 height=30 > </a> </div>

<?php
require_once('db_functions.php');

$devices = getConfiguredDevices($pdo);
//print_r($devices);

foreach($devices as $device){ //HTML=>?>
    <div id="container">
        <div id="timestamp"><?php echo $device["data_last_time_fixed"]; ?></div>
        <div id="deviceId"><?php echo $device["data_id"]; ?> </div>
        <div id="heading"><?php echo $device["data_heading"]; ?> </div>
        <div id="data" onClick="showGraph(<?php echo $device["id"]; ?>)"><?php echo $device["data_last_value"]; ?>
            <img  src="graf.png" alt="se graf" width="20" height="20">
        </div><div id="ph<?php echo $device["id"]; ?>"></div>
    </div>
<?php } //<=HTML

?>
<script>
function showGraph(id){
        //document.getElementById("ph"+id).innerHTML = "Hello World";
        $("#ph"+id).load("chart.php?id="+id);
    }

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