У меня есть диаграмма google, извлекающая данные из моей базы данных, которая работает так, как я хочу. На основе запроса получения в URL-адресе он извлекает данные из выбранной таблицы.
Я хочу сделать это обновление диаграммы через ajax на основе выбранной таблицы из выпадающего меню. Часть, с которой я не могу пробиться, – это заставить данные реагировать с помощью ajax. Я думаю, что приведенный ниже код близок, но я получаю следующую ошибку, от которой я не могу избавиться.
getdata.php: 22 Uncaught ReferenceError: $ не определенdrawVisualization @ getdata.php: 22onchange @ getdata.php: 47
Я попытался удалить GET-запрос из getdata.php и жестко кодировать таблицу, думая, что это значение не определено, но это не разрешило ошибку.
Рабочий график
<!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> Новый код с запросом AJAX
<!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
<?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']}' } ]); "; } ?>
рекомендуем использовать php для получения json в форме, которую google принимает
Ниже приведен полный пример использования ajax для получения json-данных из php и рисования диаграммы google
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(); $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); ?>
и не рекомендуется использовать -> async: false
или inline обработчики событий -> <select name="users" onchange="drawVisualization(this.value)">
также, hAxis и vAxis должны появляться только один раз в параметрах диаграммы
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>