如何根据下拉菜单中的用户输入使用 AJAX 动态更新 Google 图表？-php教程-PHP中文网

通过 AJAX 根据用户输入更新 Google 图表

问题

分析

解决方案

首页

后端开发

php教程

如何根据下拉菜单中的用户输入使用 AJAX 动态更新 Google 图表？

Linda Hamilton

Dec 07, 2024 pm 04:10 PM

How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?

通过 AJAX 根据用户输入更新 Google 图表

问题

Google 图表当前配置为根据获取请求。目标是根据用户从下拉菜单中的选择通过 AJAX 动态更新此图表。

分析

核心问题源于图表对 AJAX 更新缺乏响应。 JSON 格式不匹配可能会阻止 Google 渲染图表。

解决方案

PHP 代码(getdata.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();

// Define column labels
$table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

// Populate data rows
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);
?>

登录后复制

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', {
        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>

登录后复制

主要区别：

getdata.php 脚本现在返回与 Google 兼容的 JSON 格式的数据图表。
hAxis 和 vAxis 在图表选项中仅指定一次，而不是出现两次。
删除 async: false 选项以防止意外行为。
不使用内联事件处理程序，而是添加 jQuery 更改侦听器。

以上是如何根据下拉菜单中的用户输入使用 AJAX 动态更新 Google 图表？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

在Laravel中使用Flash会话数据 Mar 12, 2025 pm 05:08 PM

Laravel使用其直观的闪存方法简化了处理临时会话数据。这非常适合在您的应用程序中显示简短的消息，警报或通知。默认情况下，数据仅针对后续请求： $请求 -

php中的卷曲：如何在REST API中使用PHP卷曲扩展 Mar 14, 2025 am 11:42 AM

PHP客户端URL（curl）扩展是开发人员的强大工具，可以与远程服务器和REST API无缝交互。通过利用Libcurl（备受尊敬的多协议文件传输库），PHP curl促进了有效的执行

支付宝PHP SDK转账报错：如何解决'Cannot declare class SignData”问题？ Apr 01, 2025 am 07:21 AM

支付宝PHP...

简化的HTTP响应在Laravel测试中模拟了 Mar 12, 2025 pm 05:09 PM

Laravel 提供简洁的 HTTP 响应模拟语法，简化了 HTTP 交互测试。这种方法显着减少了代码冗余，同时使您的测试模拟更直观。基本实现提供了多种响应类型快捷方式： use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>