Temperature and humidity from mysql to graph using php

I am just starting up coding so please be patient with me. I am building a temperature/humidity logger following a great instruction (Linke logger guide) The output is a table in the browser (Table img)

I want to change the code to output a graph instead. I have considered using Google charts since it seems to be the easiest I have found (Google charts). What I have tried to put together code from different sources, but the graph will not show up right (empty graph)

Here is the code from the table:

    <?php

// Settings
// host, user and password settings
$host = "localhost";
$user = "logger";
$password = "*******";
$database = "temperatures";

//how many hours backwards do you want results to be shown in web page.
$hours = 168;

// make connection to database
$connectdb = mysqli_connect($host,$user,$password)
or die ("Can not reach database");

// select db
mysqli_select_db($connectdb,$database)
or die ("Can not select database");

// sql command that selects all entires from current time and X hours backwards
$sql="SELECT * FROM temperaturedata WHERE dateandtime >= (NOW() - INTERVAL $hours HOUR)";

//NOTE: If you want to show all entries from current date in web page uncomment line below by removing //
//$sql="select * from temperaturedata where date(dateandtime) = curdate();";

// set query to variable
$temperatures = mysqli_query($connectdb,$sql);

// create content to web page
?>
<html>
<head>
<title>Environment - 4thDnet</title>
</head>

<body>
</body>
<center>Temperatures</center>
<br><br>
<table width="800" border="1" cellpadding="1" cellspacing="1" align="center">
<tr>
<th></th>
<th>Sensor</th>
<th>Temperature</th>
<th>Humidity</th>
<tr>
<?php
// loop all the results that were read from database and "draw" to web page
while($temperature=mysqli_fetch_assoc($temperatures)){
echo "<tr>";
echo "<td>".$temperature['dateandtime']."</td>";
echo "<td>".$temperature['sensor']."</td>";
echo "<td>".$temperature['temperature']."</td>";
echo "<td>".$temperature['humidity']."</td>";
echo "<tr>";
}
?>
</table>
</html>

Here is the code for the empty graph:

 <?php

    // settings

    // host, user and password settings

    $host = "localhost";

    $user = "logger";

    $password = "******";

    $database = "temperatures";

    $sensor1 = "top";

    $sensor2 = "outdoor";

    $type1 = "temperature";

    $type2 = "humidity";

    //how many hours backwards do you want results to be shown in web page.

    $hours = 168;

    // make connection to database

    $connectdb = mysqli_connect($host,$user,$password);

    // select db

    mysqli_select_db($connectdb,$database)
    or die ("Can not select database");

    // sql command that selects all entires from current time and X hours backwards

    //NOTE: If you want to show all entries stored in the database, comment out the line that starts with

    // "AND t1.dateandtime..." by inserting a "#" at the beginning of that line

    $sql="SELECT year(t1.dateandtime) AS year, month(t1.dateandtime) AS month, day(t1.dateandtime) AS day,

    hour(t1.dateandtime) AS hour, minute(t1.dateandtime) AS minute,

    t1.sensor AS sensor1, t1.temperature AS temp1, t1.humidity AS hum1,

    t2.sensor AS sensor2, t2.temperature AS temp2, t2.humidity AS hum2

    FROM temperaturedata AS t1

    INNER join temperaturedata AS t2

    ON t1.dateandtime = t2.dateandtime AND t2.sensor = '" . $sensor1 . "'

    WHERE t1.sensor = '" . $sensor2 . "'

    AND t1.dateandtime >= (NOW() - INTERVAL $hours HOUR)

    ORDER BY t1.dateandtime";

    // set query to variable

    $data = mysqli_query($connectdb,$sql);

    // format current time for display

    $today = date("D M j, Y G:i:s T");

     // create content to web-page

    ?>

    <html>

    <head>

    <!-- Comment out the following line to disable auto-refresh every 15 minutes -->

    <meta http-equiv="refresh" content="900"> <!-- Refresh every 15 minutes -->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

    google.charts.load('current', {'packages':['corechart']});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

     var data = new google.visualization.DataTable();

    data.addColumn('datetime', 'Datetime');

    data.addColumn('number', '<?php echo $sensor1 . " " . $type1 ?>');

    data.addColumn('number', '<?php echo $sensor1 . " " . $type2 ?>');

    data.addColumn('number', '<?php echo $sensor2 . " " . $type1 ?>');

    data.addColumn('number', '<?php echo $sensor2 . " " . $type2 ?>');

    data.addRows([

    <?php

    // loop all the results that were read from database and "draw" to web page

    while ($row=mysqli_fetch_assoc($data)) {

    echo " [ ";

    echo "new Date(".$row['year'].", ";

     echo ($row['month']-1).", "; // adjust month from mysql to javascript format

    echo $row['day'].", ";

    echo $row['hour'].", ";

    echo $row['minute']."), ";

    echo $row['temp1'].", ";

    echo $row['temp2'].", ";

    echo $row['hum1'].", ";

    echo $row['hum2']." ";

    echo "],\n";

    }

    ?>

    ]);

    var options = {

    title: 'Bakersfield Home - <?php echo $today ?>',

    width: 1000,

    height: 600,

    curveType: 'function',

    legend: { position: 'bottom' },

    crosshair: { trigger: 'both' },

    series: {

    0: { targetAxisIndex: 0 },

    1: { targetAxisIndex: 0 },

    2: { targetAxisIndex: 1 },

     3: { targetAxisIndex: 1 }

    },

    vAxes: {

    0: {

    title: '\u00B0Censius',

    viewWindowMode: 'explicit',

    viewWindow: {

    max: 30,

    min: 1

    }

    },

     1: {

    title: '%Humidity',

    viewWindowMode: 'explicit',

    viewWindow: {

    max: 100,

    min: 0

    }

    }

    },

    hAxis: { title: 'Time of Day' }

    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);

    }

    </script>

    </head>

    <body>

    <div id="curve_chart" style="width: 1200px; height: 500px"></div>

    </body>

    </html>