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
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)