Wie zeichne ich ein Google-Diagramm mithilfe von AJAX und einer vom Benutzer ausgewählten Tabelle dynamisch neu?

Google-Diagramm basierend auf Benutzereingaben per AJAX-Anfrage neu zeichnen

Das Ziel besteht darin, ein Google-Diagramm nahtlos mit Daten aus einer ausgewählten Tabelle zu aktualisieren in einem Dropdown-Menü mit AJAX. Es tritt jedoch ein Fehler auf, weil die jQuery-$-Funktion nicht definiert ist.

Problemanalyse:

Der ursprüngliche Code verwendete eine GET-Anfrage in der URL, um Daten für abzurufen Diagramm. Wenn die Daten jedoch dynamisch über AJAX bezogen werden müssen, kann auf die erforderlichen Daten nicht zugegriffen werden, ohne die Skriptstruktur zu ändern.

Lösungsimplementierung:

1. Webseitenänderung:

   • Fügen Sie ein Dropdown-Menü zur Auswahl hinzu gewünschte Tabelle.
   • Fügen Sie einen Ereignis-Listener an das Auswahländerungsereignis an, um den AJAX-Datenabruf auszulösen.

2. AJAX-Anfrage:

   • Implementieren Sie eine AJAX-Anfrage, um die gewünschten Daten aus einer bestimmten PHP-Datei abzurufen. getdata.php.
   • Stellen Sie sicher, dass die Antwort aus der PHP-Datei in einem von Google Charts akzeptablen Format vorliegt, z. B. JSON.

3. PHP Datei (getdata.php):

   • Rufen Sie den ausgewählten Tabellennamen aus dem AJAX ab Anfrage.
   • Rufen Sie die Daten aus der Datenbanktabelle ab und formatieren Sie sie in ein Format, das Google Charts interpretieren kann (z. B. JSON).
   • Geben Sie die formatierten Daten im JSON-Format aus.

4. Diagramm neu zeichnen Logik:

   • Verwenden Sie die aus der AJAX-Anfrage erhaltenen Daten, um eine neue Google Visualization DataTable zu erstellen.
   • Verwenden Sie die Methode draw() von Google Visualization, um das Diagramm zu aktualisieren die neuen Daten.

Zusätzlich Überlegungen:

• Es wird empfohlen, ein modernes JavaScript-Framework für eine effizientere Codeorganisation zu verwenden.
• Erwägen Sie die Verwendung eines serverseitigen Datenbanktreibers anstelle direkter MySQL-Aufrufe, um die Sicherheit zu erhöhen .

Beispiel Code:

HTML/JavaScript:

$(document).ready(function() {
  $("#users").change(drawChart);

  function drawChart() {
    $.ajax({
      url: 'getdata.php',
      data: 'q=' + $("#users").val(),
      dataType: 'json',
      success: function(responseText) {
        var data = new google.visualization.DataTable(responseText);
        new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {
          curveType: 'none',
          title: 'Wind Chart',
          titleTextStyle: {
            color: 'orange'
          },
          interpolateNulls: 1
        });
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown + ': ' + textStatus);
      }
    });
  }
});

PHP (getdata.php):

<?php
require("dbconnect.php");

$db = mysql_connect($server, $user_name, $password);
mysql_select_db($database);

$sqlQuery = "SELECT * FROM ".$_GET['q']." WHERE Date(Time + INTERVAL 10 HOUR) = Date(UTC_TIMESTAMP() + INTERVAL 10 HOUR)";
$sqlResult = mysql_query($sqlQuery);

$rows = array();
$table = array();

$table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $temp = array();
  $temp[] = array('v' => (string) $row['Time']);
  $temp[] = array('v' => (float) $row['Wind_Speed']);
  $temp[] = array('v' => (float) $row['Wind_Gust']);
  $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

echo json_encode($table);
?>

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein Google-Diagramm mithilfe von AJAX und einer vom Benutzer ausgewählten Tabelle dynamisch neu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!