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):
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); ?>
2. AJAX-Anfrage in HTML/JavaScript:
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>
Hinweise:
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!