Comment puis-je mettre à jour dynamiquement un graphique Google à l'aide d'AJAX en fonction des entrées de l'utilisateur dans un menu déroulant ?-tutoriel php-php.cn

Comment puis-je mettre à jour dynamiquement un graphique Google à l'aide d'AJAX en fonction des entrées de l'utilisateur dans un menu déroulant ?

Linda Hamilton

Libérer： 2024-12-07 16:10:16

original

610 Les gens l'ont consulté

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

Mise à jour de Google Charts en fonction des entrées de l'utilisateur via AJAX

Problème

Un Google Chart est actuellement configuré pour récupérer les données d'une table spécifique en fonction d'un Requête OBTENIR. L'objectif est de mettre à jour ce graphique de manière dynamique via AJAX en fonction de la sélection d'un utilisateur dans un menu déroulant.

Analyse

Le problème principal vient d'un manque de réponse du graphique aux mises à jour AJAX. . Une incompatibilité de format JSON peut empêcher Google de restituer le graphique.

Solution

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

Copier après la connexion

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>

Copier après la connexion

Clé Différences :

Le script getdata.php renvoie désormais les données au format JSON compatible avec Google Charts.
Les hAxis et vAxis ne sont spécifiés qu'une seule fois dans les options du graphique. d'apparaître deux fois.
L'option async: false est supprimée pour éviter un comportement inattendu.
Événement en ligne les gestionnaires ne sont pas utilisés et à la place, un écouteur de changement jQuery est ajouté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!