AJAXリクエストによるユーザー入力に基づいて、Googleのグラフを再描画します。

私が望むように動作するデータベースからGoogleのグラフを引き出しています。 URLのget要求に基づいて、選択したテーブルからデータを取得します。AJAXリクエストによるユーザー入力に基づいて、Googleのグラフを再描画します。

ドロップダウンメニューから選択したテーブルに基づいて、このグラフをajax経由で更新したいと考えています。私が踏み込むことができない部分は、データがajaxを介して応答可能になることです。私は以下のコードが近いと思うが、私は以下のエラーが出てきて、私は取り除かれているように見えない。

getdata.php：22キャッチされないにReferenceError：$はdefineddrawVisualizationする@ getdata.phpではありません。22onchangeする@ getdata.php：47

私はgetdata.phpからのGETリクエストを削除し、ハードな思考でテーブルをコーディングしようとしました$は定義されていませんでしたが、それはエラーを解決しませんでした。 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() { 

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>

新しいコード

<!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']}' } ]); "; 

} 

?>

出典

2016-08-15 Alex17

はGoogleは、以下の

を受け入れた形でJSONを取得するためにPHPを使用することをお勧めすることは、PHPからJSONデータを取得し、Googleのチャート

PHP

を描画するために、AJAXを使用するための完全な例であります

<?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
またはインラインイベントハンドラ - ><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>

出典

2016-08-15 12:28:52 WhiteHat

こんにちは@WhiteHatに一度だけ表示されます！ I取得htmlファイルのページのロードに次のエラー： graphindexnew1.php：14キャッチされないにReferenceError：$はgraphindexnew1.php @ definedcallbackされていない：14 それは、このコード行を指す '$（ "＃ユーザー" ）.change（drawChart）; ' – Alex17

あなたはどこかでjqueryをインクルードしましたか？そこに '$ .ajax'がすでに存在していたと仮定し、上記の答えを編集してみてください。 – WhiteHat

それでした！親切にありがとう！上記のコードは動作します – Alex17

AJAXリクエストによるユーザー入力に基づいて、Googleのグラフを再描画します。

答えて

関連する問題