I want to create a function chart from Google Charts with my data coming from a MySQL database (localhost). The program shows no error, that is conflicting with this topic, when compiling with a online markup language validator, though it still doesn't create the function chart when viewing in the browser. I checked my code and online sources, including multiple posts on this topic from this forum, but to no avail. The PHP code works for sure. The only thing i can think off straight away would be, that the JavaScript code is not loaded right.
The JavaScript part is a slightly modified version from sgoogle linechart (type function) sourcecode (https://developers.google.com/chart/interactive/docs/gallery/linechart).
Code:
<!Doctype html>
<html>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "daylight";
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$startdate=time()-(time()%(24*3600))-7200;
$enddate=$startdate+365*24*3600;
//echo $startdate."<br>".$enddate;
$s=strftime("%Y-%m-%d", $startdate);
$e=strftime("%Y-%m-%d", $enddate);
$Off = 12; //Offset
$A = 4; //Amplidute
$light=0;
for($i=$startdate; $i<=$enddate; $i+=$day) //genData (works)
{...}
$sql_request = "SELECT * FROM `db` WHERE `Datum` >= '$s' And `Datum` <= '$e'";
$daylight_array=array();
$date_array=array();
foreach($conn->query($sql_request) as $row)
{
$daylight_array[]=$row["Tageslicht"];
$date_array[]=$row["Datum"];
//print $row["Tageslicht"];
}
// echo json_encode($date_array);
// echo json_encode($daylight_array);
?>
<div id="chart" style="width: 900px; height: 500px"></div>
<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);
var date = <?php echo json_encode($date_array); ?>;
var daylight = <?php echo json_encode($daylight_array); ?>;
function drawChart() {
var data = google.visualization.arrayToDataTable();
data.addColumn('string', 'Jahr-Monat-Tag');
data.addColumn('number', 'Sonnenstunden');
for(i = 0; i < date.length; i++)
data.addRow([date[i], daylight[i]]);
var options = {
title: 'Sonnenstunden über das Jahr',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
