AJAX와 PHP를 사용하여 Google 차트를 동적으로 다시 그리는 방법은 무엇입니까?-PHP 튜토리얼-php.cn

AJAX와 PHP를 사용하여 Google 차트를 동적으로 다시 그리는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-05 14:02:17

원래의

523명이 탐색했습니다.

How to Redraw a Google Chart Dynamically Using AJAX and PHP?

AJAX 요청을 통한 사용자 입력을 기반으로 Google 차트 다시 그리기

문제:

원하는 것 드롭다운 메뉴에서 선택한 테이블을 기반으로 Google 차트를 동적으로 업데이트하려고 하는데 다음과 같은 경우 오류가 발생합니다. AJAX를 통해 데이터를 가져오려고 합니다.

해결책:

AJAX와 외부 데이터를 사용하여 차트를 올바르게 다시 그리려면 다음 단계를 고려하세요.

1. PHP로 데이터 준비(getdata.php):

PHP를 사용하여 데이터베이스에서 데이터를 가져오고 AJAX 요청을 처리합니다.
다음과 같은 JSON 형식으로 데이터를 에코합니다. Google의 데이터 테이블과 호환됩니다.
적절한 열 레이블, 유형 및 데이터를 확인하세요. 구조.

예:

<?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);
?>

로그인 후 복사

2. HTML/JavaScript의 AJAX 요청:

jQuery AJAX를 사용하여 getdata.php 엔드포인트에서 데이터를 가져와 응답을 처리합니다.
성공하면 데이터 테이블을 생성하고 Google 시각화를 사용하여 차트 그리기 API.

예:

<script type="text/javascript">
google.load('visualization', '1', {callback: function() {
  $("#users").change(drawChart);

  function drawChart() {
    $.ajax({
      url: 'getdata.php',
      data: 'q=' + $("#users").val(),
      dataType: 'json',
      success: function(responseText) {
        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);
      }
    });
  }
}});
</script>

로그인 후 복사

참고: