Comment redessiner dynamiquement un graphique Google à l'aide d'AJAX et d'un tableau sélectionné par l'utilisateur ?

Redessiner le graphique Google en fonction des entrées de l'utilisateur via une requête AJAX

L'objectif est de mettre à jour de manière transparente un graphique Google avec les données extraites d'un tableau sélectionné dans un menu déroulant en utilisant AJAX. Cependant, une erreur survient car la fonction jQuery $ n'est pas définie.

Analyse du problème :

Le code d'origine utilisait une requête GET dans l'URL pour récupérer les données du graphique. Cependant, lorsque les données doivent provenir de manière dynamique via AJAX, les données requises ne sont pas accessibles sans modifier la structure du script.

Mise en œuvre de la solution :

1. Modification de la page Web :

   • Ajouter un menu déroulant pour sélectionner le table.
   • Attachez un écouteur d'événement à l'événement de changement de sélection pour déclencher la récupération des données AJAX.

2. Requête AJAX :

   • Implémenter une requête AJAX pour obtenir les données souhaitées à partir d'un fichier PHP désigné, getdata.php.
   • Assurez-vous que la réponse du fichier PHP est dans un format acceptable par les graphiques Google, tel que JSON.

3. PHP Fichier (getdata.php) :

   • Récupérer le nom de la table sélectionnée depuis l'AJAX demande.
   • Récupérez et formatez les données de la table de base de données dans un format que Google Charts peut interpréter (par exemple, JSON).
   • Sortez les données formatées au format JSON.

4. Redessiner le graphique Logique :

   • Utilisez les données obtenues à partir de la requête AJAX pour créer un nouveau DataTable de visualisation Google.
   • Utilisez la méthode draw() de Google Visualization pour mettre à jour le graphique avec les nouvelles données.

Supplémentaires Considérations :

• Il est recommandé d'utiliser un framework JavaScript moderne pour une organisation du code plus efficace.
• Envisagez d'utiliser un pilote de base de données côté serveur au lieu d'appels MySQL directs pour une sécurité accrue. .

Exemple Code :

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

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!