Redraw google chart based on user input via AJAX request
<p>I have a google chart pulling data from my database that works as I want it to. Based on a get request in the URL it draws the data from the selected table.</p>

<p>I want make this chart update via ajax based on a selected table from a drop down menu. The part I can't break through on is getting the data to be responsive via ajax. I think the below code is close, but I'm getting the below error that I can't seem to get rid of. </p>

<p>getdata.php:22 Uncaught ReferenceError: $ is not defineddrawVisualization @ getdata.php:22onchange @ getdata.php:47</p>

<p>I tried removing the GET request from the getdata.php and hard coding a table in thinking that was the $not defined, but that didn't resolve the error.</p>

<p><strong>Working Graph Code</strong></p>

<pre><code>&lt;!DOCTYPE&gt;
&lt;html&gt;
&lt;head&gt; 
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
&lt;title&gt;
Wind Graph
&lt;/title&gt;
&lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
google.load('visualization', '1', {packages: ['corechart']});
&lt;/script&gt;
&lt;script type="text/javascript"&gt;

function drawVisualization() {

var data = new google.visualization.DataTable();

&lt;?php
require("dbconnect.php");

echo " data.addColumn('string', 'Time');";
echo " data.addColumn('number', 'Wind_Speed');";
echo " data.addColumn('number', 'Wind_Gust');";

$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);
while ($row = mysql_fetch_assoc($sqlResult)) {

echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); ";

}

?&gt;

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "none",
title: "AU0001 Wind Chart",
titleTextStyle: {color: "orange"},
//width: 800, height: 400,
//vAxis: {maxValue: 10},
vAxis: {minValue: 0},
vAxis: {title: 'Wind Speed (Knots)'},
vAxis: {baseline: 0},
vAxis: {gridlines: {count: 10}  },
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}},
hAxis: {title: "Time", titleTextStyle: {color: "orange"}},
interpolateNulls: 1
}
);
}

google.setOnLoadCallback(drawVisualization);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization" style="width: 100%; height: 400px;"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>New code with AJAX request</strong></p>

<pre><code>&lt;!DOCTYPE&gt;
&lt;html&gt;
&lt;head&gt; 
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
&lt;title&gt;
Wind Graph
&lt;/title&gt;
&lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
google.load('visualization', '1', {packages: ['corechart']});
&lt;/script&gt;
&lt;script type="text/javascript"&gt;

function drawVisualization(num) {

var data = new google.visualization.DataTable(TableData);
var TableData = $.ajax({
  url: "getdata.php",
  data: "q="+num,
  dataType:"json",
  async: false
}).responseText;

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "none",
title: "Wind Chart",
titleTextStyle: {color: "orange"},
//width: 800, height: 400,
//vAxis: {maxValue: 10},
vAxis: {minValue: 0},
vAxis: {title: 'Wind Speed (Knots)'},
vAxis: {baseline: 0},
vAxis: {gridlines: {count: 10}  },
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}},
hAxis: {title: "Time", titleTextStyle: {color: "orange"}},
interpolateNulls: 1
}
);
}

//  google.setOnLoadCallback(drawVisualization);
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-family: Arial;border: 0 none;"&gt;
&lt;form&gt;
&lt;select name="users" onchange="drawVisualization(this.value)"&gt;
&lt;option value=""&gt;Select unit:&lt;/option&gt;
&lt;option value="0001"&gt;0001&lt;/option&gt;
&lt;option value="0002"&gt;0002&lt;/option&gt;

&lt;/select&gt;
&lt;/form&gt;
&lt;div id="visualization" style="width: 100%; height: 400px;"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>getdata.php code</strong></p>

<pre><code>&lt;?php
require("dbconnect.php");

echo " data.addColumn('string', 'Time');";
echo " data.addColumn('number', 'Wind_Speed');";
echo " data.addColumn('number', 'Wind_Gust');";

$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);
while ($row = mysql_fetch_assoc($sqlResult)) {

echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); ";

}

?&gt;
</code></pre>