Ajax mit MySQL und Google Charts von pl, 18.02.2019 15:57

Ajax mit MySQL und Google Charts

script42 18.02.2019 10:33

Liebes Forum,

ich bin Programmieranfängerin und schlage mich gerade das erste Mal mit Ajax herum.
Ich habe die jQuery-Variante gewählt und möchte bei Auswahl eines Datums in einem Select-Menü dieses über Ajax an meine Datenbankabfrage(MySQL) senden, aus dem Ergebnis der Abfrage ein JSON-Objekt generieren und dieses dann meiner Google-Charts-Funktion füttern, um es in Form einer Pie-Chart angezeigt zu bekommen.
Angezeigt wird mir tatsächlich auch eine Pie-Chart mit Datenbank-Daten, nur leider immer von Anfang 2017, statt mit den gefütterten Daten aus 2019. Ich habe schon cache: false ergänzt, GET und POST versucht und alles rauf und runter überprüft, finde aber den Fehler nicht.
Das ist mein Code (jQuery wird in einem der Header geladen; genauso öffnende und schließende Head-, Body- und HTML-Tags. Für die Testung habe ich auch Prepared Statements erst einmal weggelassen):

<?php
  include_once 'header2.php';
?>
<style>
  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
</style>

<title>Aufträge</title>

    <!--AJAX API laden-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!-- jQuery wurde schon in einem der Header geladen -->
    <script type="text/javascript">
    
    // Visualization API und Piechart Package laden
    google.charts.load('current', {'packages':['corechart']});
      
    // Erstellen einer Callback-Funktion, die ablaufen soll, wenn die Google Visualization API geladen ist.
    google.charts.setOnLoadCallback(ajaxChart);
      
      function ajaxChart() {
          // Event Listener an Select-Element
          $("#selectinput").change(drawChart);

          function drawChart() {
            $.ajax({
              url: 'ajax/fotografen.php',
              type: 'POST',
              data:{datum: $("#selectinput").val()},
              // data: 'datum=' + $("#selectinput").val(),
              dataType: 'json',
              cache: false,
              success: function (responseText) {
                // Antwort von php soll für Data Table verwendet werden
                var data = new google.visualization.DataTable(responseText);
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'))
                var options = {
                  title: 'Aufträge pro Fotograf',
                  titleTextStyle: {
                    color: 'orange'
                  },
                  is3D: 'true',
                  width: 800,
                  height: 600
                };
                chart.draw(data, options);
              },
              error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown + ': ' + textStatus);
              }
            });
          }
        }
    </script>
<?php
  include_once 'header3.php';
?>
  <form action="">
    <select name="datum" id="selectinput">
      <option value="" selected disabled>Datum auswählen:</option>
      <option value="2019-01-01">Ab Januar</option>
      <option value="2019-02-01">Ab Februar</option>
      <option value="2019-04-01">Ab April</option>
    </select>
  </form>
    
  <div id="chart_div"></div>
<?php 
  include_once 'footer.php';
?>

Und das ist der Code meiner abgefragten ajax/fotografen.php-Datei:

<?php
  include_once '../inc/datenbankverbindung.php';

  $Datum = $_POST['datum'];  

    $selectChart = "SELECT a.FotografenID AS ID, concat(FotografVorname, ' ', FotografNachname) AS Name, COUNT(*) AS Auftraege FROM tbl_KgAuftraege a JOIN tbl_Fotografen b ON a.FotografenID = b.FotografenID WHERE (Fototag1>=$Datum) AND (Aktivitaet='aktiv') GROUP BY a.FotografenID;";
    $resultChart = mysqli_query($conn, $selectChart);

    $table = array();
    $rows = array();
    $table['cols'] = array(
            array('label' => 'Fotograf', 'type' => 'string'),
            array('label' => 'Aufträge', 'type' => 'number')
    );

   	while ($rowChart = mysqli_fetch_assoc($resultChart)) {
        $temp = array();
        $temp[] = array('v' => (string) $rowChart['Name']);
        $temp[] = array('v' => (int) $rowChart['Auftraege']);
        $rows[] = array('c' => $temp);
    }

	$table['rows'] = $rows;
	$jsonTable = json_encode($table);
  echo $jsonTable;
?>

Für jegliche Idee wäre ich sehr dankbar!

Kerstin

Beitrag melden

– Informationen zu den Bewertungsregeln

akzeptierte Antworten