Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan Jadual Pilihan Pengguna?

Lukis Semula Carta Google Berdasarkan Input Pengguna melalui Permintaan AJAX

Matlamatnya adalah untuk mengemas kini carta Google dengan lancar dengan data yang diambil daripada jadual yang dipilih dalam menu lungsur menggunakan AJAX. Walau bagaimanapun, ralat timbul kerana fungsi jQuery $ tidak ditentukan.

Analisis Masalah:

Kod asal menggunakan permintaan GET dalam URL untuk mengambil data untuk carta. Walau bagaimanapun, apabila data perlu diperoleh secara dinamik melalui AJAX, data yang diperlukan tidak boleh diakses tanpa mengubah struktur skrip.

Pelaksanaan Penyelesaian:

1. Pengubahsuaian Halaman Web:

   • Tambahkan menu lungsur turun untuk memilih jadual yang dikehendaki.
   • Lampirkan pendengar acara pada acara perubahan pemilihan untuk mencetuskan pengambilan data AJAX.

2. AJAX Permintaan:

   • Laksanakan permintaan AJAX untuk mendapatkan data yang dikehendaki daripada fail PHP yang ditetapkan, getdata.php.
   • Pastikan bahawa respons daripada fail PHP adalah dalam format yang boleh diterima oleh carta Google, seperti JSON.

3. Fail PHP (getdata.php):

   • Dapatkan semula nama jadual yang dipilih daripada Permintaan AJAX.
   • Dapatkan dan formatkan data daripada jadual pangkalan data ke dalam format yang boleh ditafsirkan oleh carta Google (cth., JSON).
   • Output data yang diformatkan dalam format JSON.

4. Lukis Semula Carta Logik:

   • Gunakan data yang diperoleh daripada permintaan AJAX untuk mencipta Jadual Data Penglihatan Google baharu.
   • Gunakan kaedah cabutan() Google Visualisasi untuk mengemas kini carta dengan data baharu.

Tambahan Pertimbangan:

• Adalah disyorkan untuk menggunakan rangka kerja JavaScript moden untuk organisasi kod yang lebih cekap.
• Pertimbangkan untuk menggunakan pemacu pangkalan data sebelah pelayan dan bukannya panggilan MySQL langsung untuk meningkatkan keselamatan .

Contoh Kod:

HTML/JavaScript:

$(document).ready(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);
      }
    });
  }
});

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

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

Atas ialah kandungan terperinci Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan Jadual Pilihan Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!