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

Ich habe ein Google-Diagramm, das Daten aus meiner Datenbank zieht, die so funktionieren, wie ich es möchte. Basierend auf einer get-Anforderung in der URL zeichnet es die Daten aus der ausgewählten Tabelle.Google-Diagramm basierend auf Benutzereingabe über AJAX-Anfrage neu zeichnen

Ich möchte dieses Diagramm Update über Ajax basierend auf einer ausgewählten Tabelle aus einem Dropdown-Menü. Der Teil, den ich nicht durchbrechen kann, ist, dass die Daten über Ajax reagieren. Ich denke, der folgende Code ist knapp, aber ich bekomme den Fehler, den ich nicht loswerden kann.

getdata.php: 22 Uncaught Reference: $ ist nicht defineddrawVisualization @ getdata.php: 22onchange @ getdata.php: 47

Ich habe versucht, die GET-Anforderung von der getdata.php entfernen und harte Kodierung eine Tabelle im Denken das war das $ nicht definiert, aber das hat den Fehler nicht behoben.

Arbeits Graph-Code

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title> 
Wind Graph 
</title> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', {packages: ['corechart']}); 
</script> 
<script type="text/javascript"> 

function drawVisualization() { 

var data = new google.visualization.DataTable(); 

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

echo " data.addColumn('string', 'Time');"; 
echo " data.addColumn('number', 'Wind_Speed');"; 
echo " data.addColumn('number', 'Wind_Gust');"; 

$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); 
while ($row = mysql_fetch_assoc($sqlResult)) { 

echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); "; 

} 

?> 

// Create and draw the visualization. 
new google.visualization.LineChart(document.getElementById('visualization')). 
draw(data, {curveType: "none", 
title: "AU0001 Wind Chart", 
titleTextStyle: {color: "orange"}, 
//width: 800, height: 400, 
//vAxis: {maxValue: 10}, 
vAxis: {minValue: 0}, 
vAxis: {title: 'Wind Speed (Knots)'}, 
vAxis: {baseline: 0}, 
vAxis: {gridlines: {count: 10} }, 
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}}, 
hAxis: {title: "Time", titleTextStyle: {color: "orange"}}, 
interpolateNulls: 1 
} 
); 
} 

google.setOnLoadCallback(drawVisualization); 
</script> 
</head> 
<body> 
<div id="visualization" style="width: 100%; height: 400px;"></div> 
</body> 
</html>

Neuer Code mit AJAX-Request

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title> 
Wind Graph 
</title> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', {packages: ['corechart']}); 
</script> 
<script type="text/javascript"> 

function drawVisualization(num) { 

var data = new google.visualization.DataTable(TableData); 
var TableData = $.ajax({ 
    url: "getdata.php", 
    data: "q="+num, 
    dataType:"json", 
    async: false 
}).responseText; 

// Create and draw the visualization. 
new google.visualization.LineChart(document.getElementById('visualization')). 
draw(data, {curveType: "none", 
title: "Wind Chart", 
titleTextStyle: {color: "orange"}, 
//width: 800, height: 400, 
//vAxis: {maxValue: 10}, 
vAxis: {minValue: 0}, 
vAxis: {title: 'Wind Speed (Knots)'}, 
vAxis: {baseline: 0}, 
vAxis: {gridlines: {count: 10} }, 
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}}, 
hAxis: {title: "Time", titleTextStyle: {color: "orange"}}, 
interpolateNulls: 1 
} 
); 
} 

// google.setOnLoadCallback(drawVisualization); 
</script> 
</head> 
<body style="font-family: Arial;border: 0 none;"> 
<form> 
<select name="users" onchange="drawVisualization(this.value)"> 
<option value="">Select unit:</option> 
<option value="0001">0001</option> 
<option value="0002">0002</option> 

</select> 
</form> 
<div id="visualization" style="width: 100%; height: 400px;"></div> 
</body> 
</html>

getdata.php Code

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

echo " data.addColumn('string', 'Time');"; 
echo " data.addColumn('number', 'Wind_Speed');"; 
echo " data.addColumn('number', 'Wind_Gust');"; 

$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); 
while ($row = mysql_fetch_assoc($sqlResult)) { 

echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); "; 

} 

?>

Quelle

2016-08-15 Alex17

empfehlen php json in Form zu bekommen, dass google

akzeptiert folgende ist ein vollständiges Beispiel für Ajax mit json Daten von PHP zu bekommen und ein Google-Diagramm

php

zeichnen

<?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); 
?>

und Sie verwenden nicht empfehlen ->async: false
oder Inline-Event-Handler -><select name="users" onchange="drawVisualization(this.value)">

auch, hAxis und vAxis sollte nur einmal in Diagrammoptionen erscheinen

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', { 
     // google-vis callback 
     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 style="font-family: Arial;border: 0 none;"> 
    <form> 
     <select id="users"> 
     <option value="" selected disabled>Select unit:</option> 
     <option value="0001">0001</option> 
     <option value="0002">0002</option> 
     </select> 
    </form> 
    <div id="visualization" style="width: 100%; height: 400px;"></div> 
    </body> 
</html>

Quelle

2016-08-15 12:28:52 WhiteHat

Hallo @WhiteHat, Dank für die Unterstützung! Ich erhalte die folgenden Fehler beim Laden der Seite der HTML-Datei: graphindexnew1.php: 14 Uncaught Reference: definedcallback ist $ nicht @ graphindexnew1.php: 14 Es weist auf diese Codezeile '$ („# Benutzer“) .change (drawChart); ' – Alex17

hast du jquery irgendwo eingefügt? vermutete es war da mit '$ .ajax' schon da, siehe edit nach oben antworten .. – WhiteHat

Das wars! Dankesehr! Der Code wie oben funktioniert – Alex17

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

Antwort

Verwandte Themen