Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan PHP?

Lukis Semula Carta Google Berdasarkan Input Pengguna melalui Permintaan AJAX

Masalah:

Anda mahu untuk mengemas kini carta Google secara dinamik berdasarkan jadual yang dipilih daripada menu lungsur, tetapi anda menghadapi ralat semasa cuba mengambil data melalui AJAX.

Penyelesaian:

Untuk melukis semula carta dengan betul menggunakan AJAX dan data luaran, pertimbangkan langkah berikut:

1 . Penyediaan Data dalam PHP (getdata.php):

• Gunakan PHP untuk mengambil data daripada pangkalan data anda dan mengendalikan permintaan AJAX.
• Gemakan data dalam format JSON iaitu serasi dengan jadual data Google.
• Pastikan label lajur, jenis dan data yang sesuai struktur.

Contoh:

<?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. Permintaan AJAX dalam HTML/JavaScript:

• Gunakan jQuery AJAX untuk mengambil data daripada titik akhir getdata.php dan memproses respons.
• Setelah berjaya, cipta jadual data dan lukis carta menggunakan Visualisasi Google API.

Contoh:

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

Nota:

• Elakkan menggunakan async: false dalam permintaan AJAX, kerana ia boleh menyekat pelaksanaan.
• Alih Pilihan hAxis dan vAxis hanya sekali dalam objek pilihan carta.
• Pastikan anda menggunakan pemilih yang betul untuk pengendali acara onchange dalam HTML.

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