suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Wie kann ich ein Google-Diagramm mithilfe von AJAX basierend auf Benutzereingaben aus einem Dropdown-Menü dynamisch aktualisieren?

Wie kann ich ein Google-Diagramm mithilfe von AJAX basierend auf Benutzereingaben aus einem Dropdown-Menü dynamisch aktualisieren?

Linda Hamilton
Linda HamiltonOriginal
2024-12-07 16:10:16650Durchsuche

How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?

Aktualisierung von Google Charts basierend auf Benutzereingaben über AJAX

Problem

Ein Google Chart ist derzeit so konfiguriert, dass es Daten aus einer bestimmten Tabelle basierend auf a abruft GET-Anfrage. Das Ziel besteht darin, dieses Diagramm dynamisch über AJAX zu aktualisieren, basierend auf der Auswahl eines Benutzers aus einem Dropdown-Menü.

Analyse

Das Kernproblem ergibt sich aus der mangelnden Reaktion des Diagramms auf AJAX-Updates . Eine Nichtübereinstimmung des JSON-Formats verhindert möglicherweise, dass Google das Diagramm rendert.

Lösung

PHP-Code (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();

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

// Populate data rows
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);
?>

HTML/Javascript:

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Wind Graph</title>
    <script src="http://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      google.load('visualization', '1', {
        callback: function () {
          // Add event listener to select element
          $("#users").change(drawChart);

          function drawChart() {
            $.ajax({
              url: 'getdata.php',
              // Use value from select element
              data: 'q=' + $("#users").val(),
              dataType: 'json',
              success: function (responseText) {
                // Use response from PHP for data table
                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);
              }
            });
          }
        },
        packages: ['corechart']
      });
    </script>
  </head>
  <body>

Schlüssel Unterschiede:

  • Das Skript getdata.php gibt jetzt Daten im JSON-Format zurück, das mit Google Charts kompatibel ist.
  • Die h-Achse und die v-Achse werden stattdessen nur einmal in den Diagrammoptionen angegeben des zweimaligen Erscheinens.
  • Die Option async: false wurde entfernt, um unerwartetes Verhalten zu verhindern.
  • Inline Es werden keine Ereignishandler verwendet, stattdessen wird ein jQuery-Änderungs-Listener hinzugefügt.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Google-Diagramm mithilfe von AJAX basierend auf Benutzereingaben aus einem Dropdown-Menü dynamisch aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript json jquery ajax html format using Event this input table issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sollten Sie Getter und Setter in PHP verwenden?Nächster Artikel：Sollten Sie Getter und Setter in PHP verwenden?

In Verbindung stehende Artikel

Mehr sehen