ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

php – 通过AJAX请求根据用户输入重绘Google图表

2019-09-15 12:39:31  阅读：119  来源： 互联网

标签：php ajax google-visualization


我有一个谷歌图表从我的数据库中提取数据,这是我想要的.根据URL中的get请求,它从选定的表中绘制数据.

我想根据下拉菜单中的选定表格通过ajax更新此图表.我无法突破的部分是通过ajax响应数据.我认为下面的代码是接近的,但我得到了以下错误,我似乎无法摆脱.

getdata.php：22未捕获的ReferenceError：$未定义drawVisualization @ getdata.php：22onchange @ getdata.php：47

我尝试从getdata.php中删除GET请求并硬编码一个表,认为这是$not defined,但是没有解决错误.

工作图代码

<!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

以下是使用ajax从php获取json数据并绘制谷歌图表的完整示例

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
或内联事件处理程序 – > < 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>

标签：php,ajax,google-visualization
来源： https://codeday.me/bug/20190915/1804811.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有