How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?-PHP Tutorial-php.cn

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

Linda Hamilton

Release： 2024-12-07 16:10:16

Original

612 people have browsed it

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

Updating Google Charts Based on User Input via AJAX

Problem

A Google Chart is currently configured to fetch data from a specific table based on a GET request. The goal is to update this chart dynamically via AJAX based on a user's selection from a drop-down menu.

Analysis

The core issue arises from a lack of response from the chart to AJAX updates. A JSON format mismatch may be preventing Google from rendering the chart.

Solution

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

Copy after login

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>

Copy after login

Key Differences:

The getdata.php script now returns data in JSON format compatible with Google Charts.
The hAxis and vAxis are specified only once in the chart options, instead of appearing twice.
The async: false option is removed to prevent unexpected behavior.
Inline event handlers are not used, and instead, a jQuery change listener is added.

The above is the detailed content of How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?. For more information, please follow other related articles on the PHP Chinese website!