Home >Backend Development >PHP Tutorial >How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?
How can I dynamically update a Google Chart using AJAX based on user input from a dropdown menu?
- Linda HamiltonOriginal
- 2024-12-07 16:10:16598browse
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);
?>
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>
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!