Hallo Leute, ich komme nicht weiter.
ich möchte das "Gauge" von Google nutzen, um Temperaturwerte darzustellen.
Das ganze soll sich am besten im Bereich "Realtime" oder aktualisieren alle 5-10sek bewegen.
Die Daten werden in eine mysql Datenbank geschrieben und am Ende mit Java + Php ausgelesen.
Jetzt habe ich ein Beispiel gefunden, welches ich auch auf meine Datenbank übertragen konnte.
http://mireille.it/example-code-r…ysql-json-ajax/
Leider bezieht sich das Beispiel auf ein Kreisdiagramm und nicht auf das Google Gauge.
meine index.php sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title>My realtime chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url: 'get_json.php', // make this url point to the data file
dataType: 'json',
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: 'My Weekly Plan',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
//do not forget to check ur div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, options);
setInterval(drawChart, 500 );
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 500px; height: 500px;"></div>
</body>
</html>
Alles anzeigen
meine get_json.php so:
<?php
/* $server = the IP address or network name of the server
* $userName = the user to log into the database with
* $password = the database account password
* $databaseName = the name of the database to pull data from
* table structure - colum1 is cas: has text/description - column2 is data has the value
*/
$con = mysql_connect('localhost', 'root', 'raspberry') or die('Error connecting to server');
mysql_select_db('temp', $con);
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysql_query("SELECT * FROM `zimmer4` ORDER BY ID DESC LIMIT 1");
$table = array();
$table['cols'] = array(
/* define your DataTable columns here
* each column gets its own array
* syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
// I assumed your first column is a "string" type
// and your second column is a "number" type
// but you can change them if they are not
array('label' => 'ID', 'type' => 'string'),
array('label' => 'Temp', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['ID']);
$temp[] = array('v' => (int) $r['Temp']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
// insert the temp array into $rows
$rows[] = array('c' => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
Alles anzeigen
Wie gesagt, das Diagramm wird dargestellt.
Kreisdiagramme brauchen die Daten wie folgt:
Das "Gauge" so:
Wenn mehr Infos benötigt werden, poste ich diese sofort!
Ich hoffe, ihr könnt mir helfen!
Wenn ich das richtig sehe, müssen meine Daten für das "Gauge" Untereinander angezeigt werden.
Einmal Text "Temp" und dadrunter dann die ausgelesene Temperatur.
Wahrscheinlich liegt es am falschen auslesen/formatieren in der get_json.php oder?
Vielen Dank!
Bastian