kostenloser Webspace werbefrei: lima-city


Google Chart mit MySQL Daten erstellen

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    my-easytools

    my-easytools hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Zeig mal den Quellcode der
    /chart/getData.php


    In dem damit erstellten JSON ist jedenfalls ein Fehler enthalten:
    "label": Datum""
    Das sollte vielmehr so aussehen:
    "label": "Datum"
  4. Autor dieses Themas

    my-easytools

    my-easytools hat kostenlosen Webspace.

    hackyourlife schrieb:
    Zeig mal den Quellcode der
    /chart/getData.php


    In dem damit erstellten JSON ist jedenfalls ein Fehler enthalten:
    "label": Datum""
    Das sollte vielmehr so aussehen:
    "label": "Datum"


    Vielen Dank! Hab ich echt übersehen, so oft durchgelesen und dann so ein dummer Fehler :wall:

    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
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    my-easytools schrieb:
    Update: Ich habe es jetzt zum laufen gebracht, gab noch ein paar kleine Fehler in der JSON-Datei.
    Das sieht ja ganz danach aus als ob du den JSON-Text selber zusammen bauen würdest…

    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 ;-)
  6. Autor dieses Themas

    my-easytools

    my-easytools hat kostenlosen Webspace.

    hackyourlife schrieb:
    my-easytools schrieb:
    Update: Ich habe es jetzt zum laufen gebracht, gab noch ein paar kleine Fehler in der JSON-Datei.
    Das sieht ja ganz danach aus als ob du den JSON-Text selber zusammen bauen würdest…

    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?
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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.
  8. Autor dieses Themas

    my-easytools

    my-easytools hat kostenlosen Webspace.

    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
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!