AJAX ??? ?? ??? ??? ???? Google ?? ?? ???

??? ??? ????? ??? ???? Google ??? ???? ?????? ????. AJAX? ???? ???? ???? ??? jQuery $ ??? ???? ?? ??? ?????.

?? ??:

?? ??? URL?? GET ??? ???? ??. ??? AJAX? ?? ???? ???? ????? ?? ?? ???? ??? ???? ??? ??? ???? ???? ? ????.

??? ??:

1. ???? ??:

   • ??? ???? ????? ???? ??? ?????.
   • AJAX ??? ??? ?????? ?? ?? ???? ??? ???? ?????.

2. AJAX ??:

   • ??? PHP ??? getdata.php?? ??? ???? ???? AJAX ??? ?????.
   • PHP ??? ??? Google ???? ???? ??(?: JSON.

3. PHP ??(getdata.php):

   • AJAX ???? ??? ??? ??? ?????.
   • ?????? ????? ???? ???? Google ???? ??? ? ?? ???? ?? ??(?: JSON).
   • ??? ???? JSON ???? ?????.

4. ?? ?? ??? ??:

   • AJAX ???? ?? ???? ???? ??? Google ???? ????. DataTable.
   • Google ???? draw() ???? ???? ? ???? ??? ???????.

?? ?? ??:

• ? ???? ??? ?? ?? JavaScript ?????? ???? ?? ????.
• ?? ??? ?? ?? MySQL ?? ?? ?? ? ?????? ????? ???? ?? ????.

? ??:

HTML/JavaScript:

$(document).ready(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);
      }
    });
  }
});

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

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

? ??? AJAX? ???? ??? ???? ???? Google ??? ???? ?? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!