PHP-Programmierkurs [8] - Datenbankabfragen & google charts

Verbindung

Verbindung aufnehmen
Zunächst muss eine Verbindung zur Datenbank bestehen:

//php-code
$db_host="localhost";
$db_user="username";
$db_password="deinPasswort";
$db_database="nameDerDatenbank";
 
//Verbindung aufbauen
$verbindung = mysqli_connect($db_host, $db_user, $db_password, $db_database) or
die("Keine Verbindung möglich! " . mysqli_error($verbindung));
echo "Verbindung zum Datenbankserver / zur Datenbank hergestellt! <br />";

• Die Funktion mysqli_connect() öffnet eine Verbindung zum MySQL-Datenbankserver. In den Klammern stehen vier Parameter: Hostname, Benutzername, Kennwort und Tabellenname.
• Der Rückgabewert der Funktion mysqli_connect() ist eine Referenz auf die Verbindung. Diese Referenz wird anschließend für weitere Funktionen benötigt und daher in der Variablen $verbindung gespeichert.

Abfrage

Nun kannst du Daten aus der Datenbank abfragen. Beachte: Für ein Liniendiagramm benötigst du mindestens zwei Attribute (einen y-Wert für die Zeitachse & einen x-Wert für die Datenpunkte).

//php-code
$abfrage = "SELECT spaltenattribut1, spaltenattribut2 FROM tabellenname WHERE bedingung";
$ergebnis = mysqli_query($verbindung, $abfrage) or die("Tabellenabfrage fehlgeschlagen!");

javascript

In den body deines php-Dokuments, also nicht in die php-tags, kommt ein script (javascript):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div> 
  <script>
           google.charts.load('current', {packages: ['corechart', 'bar']});
           google.charts.setOnLoadCallback(drawBarColors);
 
   function drawBarColors() {
      var data = google.visualization.arrayToDataTable([
        ['spaltenattribut1', 'spaltenattribut2'],
        <?php  
                          while($row = mysqli_fetch_array($ergebnis))  
                          {  
                               echo "['".$row["spaltenattribut1"]."', ".$row["spaltenattribut2"]."],";  
                          }  
 
                          ?>
      ]);
 
      var options = {
        title: 'This is a title!',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'title for x-axis',
          minValue: 0,
		  maxValue: 5
        },
        vAxis: {
          title: 'title for y-axis'
        }
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
 
  </script>

• ['spaltenattribut1', 'spaltenattribut2'], <?php - Diesen Teil solltest du verändern: Ersetze spaltenattribut1 und spaltenattribut2 mit den tatsächlichen Spaltenattributen.
• Genauso hier: echo „['“.$row[„spaltenattribut1“].„', “.$row[„spaltenattribut2“].„],“; - Diesen Teil solltest du verändern: Ersetze spaltenattribut1 und spaltenattribut2 mit den tatsächlichen Spaltenattributen.
• Weise dem Diagramm auch einen aussagekräftigen Titel zu und beschrifte die x- und die y-Achse.

Die gute und hilfreiche Dokumentation zu google charts: https://developers.google.com/chart/interactive/docs/quick_start

Verbindung schließen

Die Verbindung zur Datenbank wird durch den Aufruf der Funktion mysqli_close() wieder geschlossen.

/* Verbindung schließen */
mysqli_close($verbindung);