Redraw google chart based on user input via AJAX request

recommend using php to get json in the form that google accepts

following is a full example for using ajax to get json data from php and draw a google chart

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

and do not recommend using –> async: false
or inline event handlers –> <select name="users" onchange="drawVisualization(this.value)">

also, hAxis and vAxis should only appear once in chart options

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', {
        // google-vis callback
        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 style="font-family: Arial;border: 0 none;">
    <form>
      <select id="users">
        <option value="" selected disabled>Select unit:</option>
        <option value="0001">0001</option>
        <option value="0002">0002</option>
      </select>
    </form>
    <div id="visualization" style="width: 100%; height: 400px;"></div>
  </body>
</html>

More Related Contents:

Leave a Comment Cancel reply