Aaron Gillespie Aaron Gillespie - 19 days ago 5
HTML Question

How to link a form output to a google fusion table query using javascript

I am trying to create a html form which will display a google fusion table depending on the users inputted county.

Here is the code I currently have which displays the results for county louth.

<title>Sample form</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ['table'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
"query": "SELECT 'AIRO_ID', 'Off_Name', 'County'FROM " +
"1BeYE5fGPxo3yTNdmL_JE63JEMANnckYwcUmW4ouV WHERE 'County' = 'Louth'",
"refreshInterval": 5,
"chartType": "Table",
"options": {}
});
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>


I would like to use the output of the following form to be used instead of louth. But I cant seem to figure out how to link the form to the javascript.

<html> <form>
<select name="County">
<option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
<option value="Carlow">Carlow</option>
<option value="Cavan">Cavan</option>
<option value="Clare">Clare</option>
<option value="Cork">Cork</option>
<option value="Derry">Derry</option>
<option value="Donegal">Donegal</option>
<option value="Down">Down</option>
<option value="Dublin">Dublin</option>
<option value="Fermanagh">Fermanagh</option>
<option value="Galway">Galway</option>
<option value="Kerry">Kerry</option>
<option value="Kildare">Kildare</option>
<option value="Kilkenny">Kilkenny</option>
<option value="Laois">Laois</option>
<option value="Leitrim">Leitrim</option>
<option value="Limerick">Limerick</option>
<option value="Longford">Longford</option>
<option value="Louth">Louth</option>
<option value="Mayo">Mayo</option>
<option value="Meath">Meath</option>
<option value="Monaghan">Monaghan</option>
<option value="Offaly">Offaly</option>
<option value="Roscommon">Roscommon</option>
<option value="Sligo">Sligo</option>
<option value="Tipperary">Tipperary</option>
<option value="Tyrone">Tyrone</option>
<option value="Waterford">Waterford</option>
<option value="Westmeath">Westmeath</option>
<option value="Wexford">Wexford</option>
<option value="Wicklow">Wicklow</option>
</select>
<input type="submit" value="Submit">

Answer

One way to link the <select> element with the Javascript is to use the onchange event. Then, whenever a new element is selected in the dropdown menu, a function (showCounty() in this case) is called. This function updates the chart using the selected value.

Notice that the onchange event takes a function as its argument, and the function is passed the event data (which includes the selected value) using the this keyword.

Here's a modification to your code that shows this technique:

google.charts.load("current", { packages: ['table'] });
google.charts.setOnLoadCallback(loadDefault);

function showCounty(event) {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
      "query": "SELECT 'AIRO_ID', 'Off_Name', 'County'FROM " +
               "1BeYE5fGPxo3yTNdmL_JE63JEMANnckYwcUmW4ouV WHERE 'County'='" 
               + event.value + "'",
      "chartType": "Table",
      "options": {}
    });
}

function loadDefault() {
  showCounty({value: "Louth"});
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization_div" style="width: 600px; height: 180px;"></div>
<select name="County" onchange="showCounty(this)">
  <option value="Cork">Cork</option>
  <option value="Dublin">Dublin</option>
  <option value="Louth" selected="selected">Louth</option>
</select>

Comments