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 ?

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

HTML/Javascript :

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

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!