집 >백엔드 개발 >PHP 튜토리얼 >드롭다운 메뉴의 사용자 입력을 기반으로 AJAX를 사용하여 Google 차트를 동적으로 업데이트하려면 어떻게 해야 합니까?

드롭다운 메뉴의 사용자 입력을 기반으로 AJAX를 사용하여 Google 차트를 동적으로 업데이트하려면 어떻게 해야 합니까?

Linda Hamilton원래의: 2024-12-07 16:10:16651검색

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

AJAX를 통한 사용자 입력을 기반으로 Google 차트 업데이트

문제

Google 차트는 현재 특정 테이블에서 데이터를 가져오도록 구성되어 있습니다. GET 요청. 목표는 드롭다운 메뉴에서 사용자가 선택한 항목에 따라 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript json jquery ajax html format using Event this input table issue

성명：

이전 기사：PHP에서 Getter와 Setter를 사용해야 합니까?다음 기사：PHP에서 Getter와 Setter를 사용해야 합니까?