Heim > Backend-Entwicklung > PHP-Tutorial > Wie zeichne ich ein Google-Diagramm dynamisch mit AJAX und PHP neu?

Wie zeichne ich ein Google-Diagramm dynamisch mit AJAX und PHP neu?

Susan Sarandon
Freigeben: 2024-12-05 14:02:17
Original
523 Leute haben es durchsucht

How to Redraw a Google Chart Dynamically Using AJAX and PHP?

Google-Diagramm basierend auf Benutzereingaben über AJAX-Anfrage neu zeichnen

Problem:

Sie möchten Sie möchten ein Google-Diagramm basierend auf einer ausgewählten Tabelle aus einem Dropdown-Menü dynamisch aktualisieren, aber beim Versuch, Daten über abzurufen, tritt ein Fehler auf AJAX.

Lösung:

Um das Diagramm mit AJAX und externen Daten korrekt neu zu zeichnen, beachten Sie die folgenden Schritte:

1. Datenvorbereitung in PHP (getdata.php):

  • Verwenden Sie PHP, um Daten aus Ihrer Datenbank abzurufen und die AJAX-Anfrage zu verarbeiten.
  • Echo die Daten im JSON-Format kompatibel mit der Datentabelle von Google.
  • Stellen Sie sicher, dass die Spaltenbezeichnungen, Typen und Daten korrekt sind Struktur.

Beispiel:

<?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);
?>
Nach dem Login kopieren

2. AJAX-Anfrage in HTML/JavaScript:

  • Verwenden Sie jQuery AJAX, um Daten vom getdata.php-Endpunkt abzurufen und die Antwort zu verarbeiten.
  • Bei Erfolg erstellen Sie eine Datentabelle und Zeichnen Sie das Diagramm mithilfe der Google-Visualisierung API.

Beispiel:

<script type="text/javascript">
google.load('visualization', '1', {callback: 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);
      }
    });
  }
}});
</script>
Nach dem Login kopieren

Hinweise:

  • Vermeiden Sie die Verwendung von async: false in der AJAX-Anfrage, da dies die Ausführung blockieren kann.
  • Bewegen Sie hAxis und vAxis-Optionen nur einmal im Diagrammoptionsobjekt.
  • Stellen Sie sicher, dass Sie den richtigen Selektor für den onchange-Ereignishandler im HTML verwenden.

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein Google-Diagramm dynamisch mit AJAX und PHP neu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage