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 Hamilton
Lepaskan: 2024-12-07 16:10:16
asal
650 orang telah melayarinya

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);
?>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan