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

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:

  
    <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>
  
  

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!