顯示具有 QUERY 標籤的文章。 顯示所有文章
顯示具有 QUERY 標籤的文章。 顯示所有文章

2014年1月26日 星期日

在Blogger顯示Google試算表的QUERY查詢結果

本文是Google Visualization API的運用,可以在部落格顯示Google試算表的QUERY查詢結果,點選欄位還有排序效果,程式碼是參考Google Code Playground 範例程式修改。

值得一提的是,所要連接的Google試算表如果是用新版製成的,QUERY的查詢指令可能會失效,我在陰錯陽差的狀況下將連接KEY換到舊表格一切就正常了。(PS:舊版的電子表格網址是如同「https://docs.google.com/spreadsheet/ccc?key=」這樣的),如果是新版試算表在試算表右下方會有如下的標誌




這個方法無法套用在Google的協作平台,因為該網頁空間好像不允許引用外部Script(都是自家的API了,怎會有這種限制)

如果想學習套用,請將程式碼以HTML編輯模式貼入文章內文中,並修改程式碼內文有標註//*修改地方(有2處)
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    
    <title>
      Google Visualization API Sample
    </title>
    <script src="//www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    function drawVisualization() {
     //var query = new google.visualization.Query( 
     //     'https://docs.google.com/spreadsheets/d/1SXPknVhdGumk-DLLWCijfMV8m11lWI0Fo-BbjF9WCHA/edit?usp=sharing');  
     //連接的spreadsheet(電子表格)如果是新版的,經測試Query的任何查詢指令似乎都會失效
     var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheet/ccc?key=0AkeHSKjTEDu_dDhqOXBXSDFuQm0xR284dkwwalZqWnc&usp=sharing');
          //*修改地方1:new google.visualization.Query(Google試算表參照網址)要改成自己的網址 
    
      // Apply query language.
      //相關QUERY語法請參照https://google-developers.appspot.com/chart/interactive/docs/querylanguage
      //query.setQuery('SELECT A,B where D>1');//OK
      //query.setQuery('SELECT * where upper(B) contains upper("ja")');//OK
      query.setQuery('SELECT * where upper(B) like upper("%jaC%")');//OK
      //*修改地方2:query.setQuery(查詢語法)

      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
    
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
    
      // Create and draw the visualization.
      var data = response.getDataTable();
      visualization = new google.visualization.Table(document.getElementById('table'));

      <!-- visualization.draw(data, null); -->
      visualization.draw(data, {showRowNumber: true});
    }
    
    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="border: 0 none; font-family: Arial;">
    <div id="table">
</div>
</body>
</html>

套用後的效果如下(請在各標題欄位點一下會有排序效果,如果滑鼠移動到某一列顏色也會有變化) Google Visualization API Sample

2014年1月19日 星期日

Google spreadsheet(二)

2. QUERY
從網頁導入的資料可能筆數很多,這時如果會使用QUERY來查詢,可以快速擷取你要的資訊,也比較不傷眼睛(XD大誤

語法:QUERY(資料, 查詢, 標題)

資料,指的是儲存格範圍
查詢,姑且稱做為 類SQL語言,不過因為都在 spreadsheet 內操作,所以無須寫 FROM TableName(相關的SQL語法請參照相關資料)
在spreadsheet中,標題是用不上的,都改用欄位名(Column)來查詢--見下面範例

篩選資料,原則上是可以用篩選功能,只不過是我大喜歡這個功能,因為篩選後,列的資料會隱藏,導致右邊的空白欄位無法利用(會隱藏不見)

援用上例,做個實例操作,在K2欄位輸入
=QUERY(A2:H,"select * where H like '%太魯閣%'")

這代表要找到 DATA(A2:H), H欄位中 包含有 太魯閣 字串的記錄
其中 %為萬用字元,為一個以上的字串,也就是  太魯閣前後都可以有字串

這樣就可以找到當日太魯閣號的自強號班次,你也可以改成 普悠瑪 試試...