Comment redessiner dynamiquement un graphique Google en utilisant AJAX et PHP ?-tutoriel php-php.cn

Comment redessiner dynamiquement un graphique Google en utilisant AJAX et PHP ?

Susan Sarandon

Libérer： 2024-12-05 14:02:17

original

522 Les gens l'ont consulté

How to Redraw a Google Chart Dynamically Using AJAX and PHP?

Redessiner le graphique Google en fonction de la saisie de l'utilisateur via une requête AJAX

Problème :

Vous voulez pour mettre à jour dynamiquement un graphique Google basé sur un tableau sélectionné dans un menu déroulant, mais vous rencontrez une erreur lorsque vous essayez de récupérer des données via AJAX.

Solution :

Pour redessiner correctement le graphique à l'aide d'AJAX et de données externes, envisagez les étapes suivantes :

1. Préparation des données en PHP (getdata.php) :

Utilisez PHP pour récupérer les données de votre base de données et gérer la requête AJAX.
Faites écho aux données au format JSON qui sont compatible avec le tableau de données de Google.
Assurez-vous que les étiquettes, les types et les données des colonnes sont appropriés structure.

Exemple :

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

Copier après la connexion

2. Requête AJAX en HTML/JavaScript :

Utilisez jQuery AJAX pour récupérer les données du point de terminaison getdata.php et traiter la réponse.
En cas de succès, créez une table de données et dessiner le graphique à l'aide de la visualisation Google API.

Exemple :

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

Copier après la connexion

Remarques :

Éviter d'utiliser async : false dans la requête AJAX, car cela peut bloquer l'exécution.
Déplacez hAxis et Options vAxis une seule fois dans l'objet d'options du graphique.
Assurez-vous que vous utilisez le bon sélecteur pour le gestionnaire d'événements onchange dans le HTML.

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!