Engine DEMO

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <link href="https://developers.google.com/css/screen.css" rel="stylesheet">
    <script src="http://www.google.com/jsapi"></script>
    <style>
    table {
        width: 30%;
    }
    th {
        width: 30%;
        text-align: left;
    }
    </style>
    <script>
        google.load('visualization', '1');
        function drawTable() {
            // Construct query
            var query = "SELECT 'Name' as '暱稱', 'Total' as '徽章數' FROM 3707276";
            var team = document.getElementById('team').value;
            if (team) {
                query += " WHERE 'Total' >= '" + team + "'";
            }
            var queryText = encodeURIComponent(query);
            var gvizQuery = new google.visualization.Query(
                'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
            // Send query and draw table with data in response
            gvizQuery.send(function(response) {
                var numRows = response.getDataTable().getNumberOfRows();
                var numCols = response.getDataTable().getNumberOfColumns();

                var ftdata = ['<table><thead><tr>'];
                for (var i = 0; i < numCols; i++) {
                    var columnTitle = response.getDataTable().getColumnLabel(i);
                    ftdata.push('<th>' + columnTitle + '</th>');
                }
                ftdata.push('</tr></thead><tbody>');
                for (var i = 0; i < numRows; i++) {
                    ftdata.push('<tr>');
                    for(var j = 0; j < numCols; j++) {
                        var rowValue = response.getDataTable().getValue(i, j);
                        ftdata.push('<td>' + rowValue + '</td>');
                    }
                    ftdata.push('</tr>');
                }
                ftdata.push('</tbody></table>');
                document.getElementById('ft-data').innerHTML = ftdata.join('');
           ...