Google Chart mit MySQL Daten erstellen
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
code
datei
datum
diagramm
erstellen
fehler
gedanke
information
kleine fehler
label
laufen
objekt
paar
problem
quellcode
umgehen
umlaut
update
url
vorliegen
-
Ich möchte mit Daten aus einer MySQL Datenbank mit den Google Chart Tools ein Diagramm erstellen. Ich habe auch ein ganz gutes Beispiel von Google gefunden, wie man Daten aus einer JSON-Datei als Diagramm darstellt:
https://developers.google.com/chart/interactive/docs/php_example?hl=de
Leider funktioniert es nicht, wenn ich die JSON-Datei selber aus der Datenbank erstellen lasse.
Bis auf die Daten selbst sind die JSON-Dateien mehr oder weniger übereinstimmend, aber trotzdem funktioniert es bei meinen Daten nicht. Hat jemand eine Idee woran das liegt.
Wäre echt genial, wenn mir jemand helfen kann.
Beitrag zuletzt geändert: 14.10.2012 12:05:20 von my-easytools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hackyourlife schrieb:
Zeig mal den Quellcode der
…/chart/getData.php
In dem damit erstellten JSON ist jedenfalls ein Fehler enthalten:
Das sollte vielmehr so aussehen:"label": Datum"""label": "Datum"
Vielen Dank! Hab ich echt übersehen, so oft durchgelesen und dann so ein dummer Fehler
Jetzt allerdings ist auf der Seite, auf der das Diagramm erscheinen sollte, der Fehler "Object 2012-10-20 12:00:00 has no method 'getTimezoneOffset'" zu lesen.
Es ist klar, dass es irgendwie mit dem Datum zu tun hat, aber wo könnte der Fehler liegen?
Update: Ich habe es jetzt zum laufen gebracht, gab noch ein paar kleine Fehler in der JSON-Datei.
Beitrag zuletzt geändert: 14.10.2012 12:06:27 von my-easytools -
my-easytools schrieb:
Das sieht ja ganz danach aus als ob du den JSON-Text selber zusammen bauen würdest…
Update: Ich habe es jetzt zum laufen gebracht, gab noch ein paar kleine Fehler in der JSON-Datei.
Da du sowieso PHP verwendest kannst du das auch von PHP machen lassen. Dazu musst du die Daten nur in einem Array oder Objekt vorliegen haben, dann kannst du json_encode() verwenden und musst dir keine Gedanken mehr darüber machen ob das JSON stimmt oder nicht
-
hackyourlife schrieb:
my-easytools schrieb:
Das sieht ja ganz danach aus als ob du den JSON-Text selber zusammen bauen würdest…
Update: Ich habe es jetzt zum laufen gebracht, gab noch ein paar kleine Fehler in der JSON-Datei.
Da du sowieso PHP verwendest kannst du das auch von PHP machen lassen. Dazu musst du die Daten nur in einem Array oder Objekt vorliegen haben, dann kannst du json_encode() verwenden und musst dir keine Gedanken mehr darüber machen ob das JSON stimmt oder nicht
Ich lasse die JSON-Datei durch PHP erstellen, aber im PHP-Code waren ein paar kleinere Fehler, wodurch dann eine fehlerhafte JSON-Datei entstand.
Ich habe jetzt aber ein anderes Problem und zwar werden Umlaute fehlerhaft dargestellt. Die JSON-Ausgabe ist noch komplett korrekt, nur die Anzeige im Diagramm ist dann falsch.
Hier ist der Code, der das Diagramm erstellt:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="jquery-1.6.2.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 jsonData = $.ajax({ url: "getData.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
Wie sorge ich am besten für eine korrekte Darstellung der Umlaute? -
Es wäre hilfreich, wenn du einen Link posten würdest wo man sehen kann was bei den Umlauten nicht stimmt.
Ohne weitere Informationen zu haben tippe ich mal ins Blaue: du verwendest den falschen Zeichensatz / der Google-Code kann damit nicht umgehen. -
hackyourlife schrieb:
Es wäre hilfreich, wenn du einen Link posten würdest wo man sehen kann was bei den Umlauten nicht stimmt.
Ohne weitere Informationen zu haben tippe ich mal ins Blaue: du verwendest den falschen Zeichensatz / der Google-Code kann damit nicht umgehen.
Ich habe das Problem jetzt einfach gelöst, indem ich vor die Abfrage der Daten dies setze:
mysql_query("SET NAMES 'utf8'");
Damit wird alles einwandfrei dargestellt.
Ich habe jetzt allerdings noch ein letztes Problem und zwar habe ich jetzt ein funktionierendes Diagramm, aber wie binde ich es bei Wordpress in einen Artikel oder Seite ein?
Prinzipiell ist es kein Problem die PHP-Datei über eine Wordpress Template Datei einzubinden und funktioniert, aber dabei wird nur der Code irgendwo in die Seite eingefügt und nichts angezeigt.
Hier habe ich noch mal den Code, den ich einbinden möchte:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> header("content-type: text/html; charset=utf-8"); // 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 jsonData = $.ajax({ url: "getData.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, {width: 800, height: 500}); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
Update: Ich glaube ich mach es erst mal Quick and Dirty mit einem iFrame
Beitrag zuletzt geändert: 14.10.2012 18:31:23 von my-easytools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
