Two files are needed:
GetGoogleChartData.php:
<?php
$con = mysqli_connect('host','username','password','database');
$from = $_POST['from'];
$to = $_POST['to'];
$data = array();
try
{
//value = value as double
//recorded = timestamp when the value was recorded
$query = "";
if ($from != "" && $to != ""){
$query = "SELECT value, recorded FROM database WHERE TIMESTAMP(recorded) BETWEEN '" . $from . "' AND '" . $to . "' GROUP BY recorded ORDER BY recorded";
}
else{
$query = "SELECT value, recorded FROM database GROUP BY recorded ORDER BY recorded";
}
$exec = mysqli_query($con, $query);
$data = array(
'cols' => array(
array('id' => 'Datum', 'type' => 'string'),
array('id' => 'Gewicht', 'type' => 'number'),
),
'rows' => array()
);
while ($row = mysqli_fetch_array($exec)) {
$data['rows'][] = array('c' => array(
array('v' => $row['recorded']),
array('v' => $row['value'])
));
}
echo json_encode($data, JSON_NUMERIC_CHECK);
}
catch(PDOException $e)
{
echo $e;
}
$con = null;
?>
and GoogleChartTestWithDate.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Gewichtsmessung
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var fromValue = document.getElementById("from").value;
var toValue = document.getElementById("to").value;
var data = [];
var googleData;
request = $.ajax({
type: 'POST',
url: 'GetGoogleChartData.php',
data: { from: fromValue, to: toValue }
});
request.done(function (response, textStatus, jqXHR){
data = JSON.parse(response);
googleData = new google.visualization.DataTable(data);
var options = {
title: 'Gewichtsmessung',
hAxis: {
title: 'Datum'
},
vAxis: {
title: 'Gewicht'
},
legend: {
position: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById("linechart"));
chart.draw(googleData, options);
alert(fromValue + " " + toValue);
});
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
}
</script>
</head>
<body>
<center>
<form method="POST">
<h5>Zeitraum von - bis auswählen</h5>
<input type="date" id="from" onchange="drawChart()">
<input type="date" id="to" onchange="drawChart()">
</form>
<div id="linechart" style="width: 1400px; height: 600px;"></div>
</center>
</body>
</html>
Download: GoogleChartSample
Keine Kommentare:
Kommentar veröffentlichen