Rumah >pembangunan bahagian belakang >tutorial php >Bagaimanakah saya boleh mengemas kini Carta Google secara dinamik menggunakan AJAX berdasarkan input pengguna daripada menu lungsur?

Bagaimanakah saya boleh mengemas kini Carta Google secara dinamik menggunakan AJAX berdasarkan input pengguna daripada menu lungsur?

Linda Hamiltonasal: 2024-12-07 16:10:16643semak imbas

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

Mengemas kini Carta Google Berdasarkan Input Pengguna melalui AJAX

Masalah

Carta Google kini dikonfigurasikan untuk mengambil data daripada jadual tertentu berdasarkan DAPATKAN permintaan. Matlamatnya adalah untuk mengemas kini carta ini secara dinamik melalui AJAX berdasarkan pilihan pengguna daripada menu lungsur turun.

Analisis

Isu teras timbul daripada kekurangan respons daripada carta kepada kemas kini AJAX . Ketidakpadanan format JSON mungkin menghalang Google daripada memaparkan carta.

Penyelesaian

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

Perbezaan Utama:

Skrip getdata.php kini mengembalikan data dalam format JSON yang serasi dengan Google Carta.
Haksis dan vAxis dinyatakan sekali sahaja dalam pilihan carta, bukannya muncul dua kali.
Pilihan asinkron: palsu dialih keluar untuk mengelakkan tingkah laku yang tidak dijangka.
Pengendali acara sebaris tidak digunakan dan sebaliknya, pendengar perubahan jQuery ditambahkan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengemas kini Carta Google secara dinamik menggunakan AJAX berdasarkan input pengguna daripada menu lungsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Sekiranya Anda Menggunakan Getters dan Setter dalam PHP?Artikel seterusnya：Sekiranya Anda Menggunakan Getters dan Setter dalam PHP?

Artikel berkaitan

Lihat lagi