How can I dynamically update a Google Chart using AJAX based on user dropdown selection without page reload?-PHP Tutorial-php.cn

How can I dynamically update a Google Chart using AJAX based on user dropdown selection without page reload?

Susan Sarandon

Release： 2024-12-10 20:39:12

Original

350 people have browsed it

How can I dynamically update a Google Chart using AJAX based on user dropdown selection without page reload?

Redraw Google Chart Based on User Input via AJAX Request

Background:

The goal is to update a Google chart based on user selection from a drop-down menu via AJAX, without having to reload the entire page.

Issue:

The initial attempt at the AJAX call is producing an error: $ is not defined. This is most likely due to the lack of a jQuery library reference in the code.

Solution:

To resolve the issue and enable AJAX functionality, follow these steps:

Include a jQuery Library Reference:
- Add to the HTML section.
Use JSON Format for Data:
- Modify the getdata.php file to return data in JSON format, as Google charts expect this format for data tables.
Remove Async: False Attribute:
- Do not use async: false in the AJAX request. This synchronous execution can lead to performance issues.
Remove Inline Event Handlers:
- Avoid using inline event handlers like onchange. Instead, use event listeners added dynamically through JavaScript.
Use hAxis and vAxis Only Once in Chart Options:
- Ensure that hAxis and vAxis appear only once in the chart options.

Example Code:

getdata.php:

<?php
  // ... Same database connection and query logic ...

  $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' => $row['Time']);
    $temp[] = array('v' => floatval($row['Wind_Speed']));
    $temp[] = array('v' => floatval($row['Wind_Gust']));
    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  echo json_encode($table);
?>

Copy after login

HTML / JavaScript:

<html>
  <head>
    <!-- ... Same as original code ... -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      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
                });
              }
            });
          }
        },
        packages: ['corechart']
      });
    </script>
  </head>
  <body>

Copy after login

Additional Notes:

It's a good practice to use a callback function to load Google charts after the page has finished loading.
Consider adding error handling to the AJAX request to handle potential issues.
Make sure to verify that the jQuery library version is compatible with the version of Google charts being used.

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