• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Google Chart/Diagramm mit MySQL Datenbank verknüpfen

F

Fabiii321

Mitglied
Hallo zusammen,

ich brauche Eure Hilfe in Sachen Diagramme!

Ich will ein Kreisdiagramm erstellen. Jetzt bin ich auf Google Charts gestoßen. Das sieht mir sehr gut aus.
Nun habe ich die Daten in einer MySQL Datenbank gespeichert.
Jetzt meine Frage, wie muss ich den Code abändern, dass ich das Diagramm mit diesen Daten füttern kann.

Die API und Foreneinträge helfen mir nicht so recht weiter. :(

Das ist der Google-Code:
HTML: 
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Und das äre so mal der PHP Code:
PHP: 
<?php
  session_start();
  include 'includes/connect.php';
  $von = $_GET['datepickervon'];
  $bis = $_GET['datepickerbis'];

  if ($von==''){
  echo '<h3>Bitte füllen Sie oben stehendes Formular aus!</h3>';
  }
  else {

$result = mysql_query("SELECT username FROM login");
  while ($row = mysql_fetch_array($result)){
$Benutzer=$row['username'];

$abfraget = "SELECT COUNT(*) FROM veranstaltungen WHERE (Datum >='$von' AND Datum <='$bis') AND cheft='$Benutzer'";
$ergebnist = mysql_query($abfraget);
$menget = mysql_fetch_row($ergebnist);
$anzahlt=$menget[0];

Ich wäre sehr, sehr dankbar für Hilfe!!
Vielen, vielen Dank!
Viele Grüße
Fabian
 
Falls ich deine Frage richtig Verstanden habe sollte dir das Helfen.

PHP: 
var data = google.visualization.arrayToDataTable(<?= json_encode($array, JSON_NUMERIC_CHECK) ?>);
Einfach das PHP-Array mit json_encode() in das Script ausgeben lassen.
 
Hallo;

vielen Dank für Deine Antwort!!
Jetzt habe ich mich mal hingesetzt und ein bisschen Code geschrieben.
Die Daten werden jetzt auch richtig abgefragt und so.
Jetzt stehe ich nur vor dem Problem, wie ich das jetzt weiter verarbeite.
Vor allem wie ich diese Daten in ein Array bekommen, was ich dann mit dem Code, den du mir geschrieben hast, umwandeln kann.

PHP: 
<?php
   include 'includes/connect.php';

$Requete2 = "SELECT `username` FROM `login";
$result2  = mysql_query($Requete2);
while ($row2 = mysql_fetch_array($result2)){

$username=$row2['username'];
$Requete = "SELECT anzahl_cheft FROM `login` WHERE username='$username'";
$result  = mysql_query($Requete);
while ($row = mysql_fetch_array($result)){
echo $username;
echo ":";
echo $row['anzahl_cheft'];
echo "<br>";
}
}
?>

Das wird ausgegeben:
fabi:111
t1:222
t2:333

Wäre sehr, sehr dankbar für jede Anregung!
Vielen Dank
Gruß
Fabi
 
So hallo zusammen,

habe jetzt viel gelesen und dabei diese Homepage gefunden:
http://www.amcharts.com/tutorials/using-data-loader-to-connect-charts-to-mysql-data-base/

Jetzt bin ich mal so weit gekommen:
PHP: 
<?php
   include 'includes/connect.php';

$Requete2 = "SELECT `username` FROM `login"; 
$result2  = mysql_query($Requete2); 
while ($row2 = mysql_fetch_assoc($result2)){

$username=$row2['username'];
$Requete = "SELECT anzahl_cheft FROM `login` WHERE username='$username'"; 
$result  = mysql_query($Requete);
while ($row = mysql_fetch_assoc($result)){
$data[] = $row;
}
}
echo json_encode($data);
?>

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(<?= json_encode($data, JSON_NUMERIC_CHECK) ?>);
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Er zeigt auch die Daten an und es kommt keine Fehlermeldung. Aber er zeichnet kein Diagramm.

Was mache ich falsch?

Viele Grüße und vielen Dank im Voraus!
Fabian
 
Glaube auch das es an den Daten liegt, gib uns mal wie Sempervivum schon sagte das JSON-Objekt oder einen var_dump des PHP-Array.

Du solltest von mysql auf mysqli oder PDO umsteigen, zudem solltest du Nutzereingaben wie in deinem 1. Beitrag mindestens Escapen oder besser auf Prepared-Statements setzen.
Zum anderen solltest du wenn du Backticks im Query nutzt diese auch wieder schließen:
PHP: 
$Requete2 = "SELECT `username` FROM `login`";
-                                         ^
 
Oh sorry. Ich hatte einen Denkfehler.
So gehört der Code.

Code: 
<?php
   include 'includes/connect.php';

$Requete = "SELECT username, anzahl_cheft FROM login"; 
$result  = mysql_query($Requete);
while ($row = mysql_fetch_assoc($result)){
$data[] = $row;
}
echo json_encode($data);
?>

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(<?= json_encode($data, JSON_NUMERIC_CHECK) ?>);
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Das wird ausgegeben:
[{"username":"fabi","anzahl_cheft":"111"},{"username":"t1","anzahl_cheft":"222"},{"username":"t2","anzahl_cheft":"333"}]

Aber es funktioniert leider trotzdem noch nicht. :(

Danke Euch!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben