Spreadsheet

Google程式

簡介

網址服務

JavaScript

搜尋服務

繪圖服務

AppScript

Python

Java

GAE

Android

相關訊息

相關網站

相關文獻

最新修改

訊息

相關網站

參考文獻

最新修改

簡體版

English

程式範例

<!--
  copyright (c) 2009 Google inc.
 
  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['linechart']});
    </script>
    <script type="text/javascript">
    var visualization;
 
    function drawVisualization() {
      // To see the data that this visualization uses, browse to
      // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ  
      var query = new google.visualization.Query(
          'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
 
      // Apply query language.
      query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
 
      // 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;
      }
 
      var data = response.getDataTable();
      visualization = new google.visualization.LineChart(document.getElementById('visualization'));
      visualization.draw(data, {legend: 'bottom'});
    }
 
    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="height: 400px; width: 400px;"></div>
  </body>
</html>
  1. 資料來源:https://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ#gid=0
  2. 程式來源:http://code.google.com/apis/ajax/playground/#using_the_query_language

進階範例

<!--
  copyright (c) 2009 Google inc.
 
  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
 
    var isFirstTime = true;
    var options = {'showRowNumber': true};
    var data;
    var queryInput;
 
    // To see the data that this visualization uses, browse to
    // http://spreadsheets.google.com/pub?key=rYQm6lTXPH8dHA6XGhJVFsA 
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=rYQm6lTXPH8dHA6XGhJVFsA&pub=1');
 
    function sendAndDraw() {
      // 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;
      }
      data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('querytable'));  
      table.draw(data, {'showRowNumber': true});
      if (isFirstTime) {
      init();  
      }
    }
 
    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }
 
    google.setOnLoadCallback(sendAndDraw);
 
    function init() {
      isFirstTime = false;
      (new google.visualization.Table(document.getElementById('table'))).draw(data, options);
      queryInput = document.getElementById('display-query');
    }
 
    function setQueryFromUser() {
      setQuery(queryInput.value);
    }
 
    </script>
  </head>
<body style="font-family: Arial; border: 0 none;">
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; background-color: buttonface;">
<span> Configure the query</span>
<form action="">
<table style="font-size: 12px; ">
  <tr>
    <td>Select</td>
    <td><select id='query-1' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select A,B'>select A,B</option>
      <option value='select A,B,D'>select A,B,D</option>
      <option value='select D,E,A'>select D,E,A</option>
      <option value='select E,G,B,C'>select E,G,B,C</option>
      <option value='select F,A,B,D'>select F,A,B,D</option>
    </select></td>
    <td>Group by:</td> 
    <td><select id='query-2' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select B,sum(F) group by B'>select B,sum(F) group
      by B</option>
      <option value='select B,avg(G),sum(E) group by B'>select
      B,avg(G),sum(E) group by A</option>
    </select></td>
    <td>Scalar functions:</td>
    <td> <select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select F-E'>select F-E</option>
      <option value='select F*G'>select F*G</option>
      <option value='select (F-E)*G'>select (F-E)*G</option>
    </select></td>
    <td>Filter:</td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='where G &lt; 80'>where G &lt; 80</option>
      <option value='where G &lt; 90'>where G &lt; 90</option>
      <option value="where D &lt;&gt; 'Asia'">where D &lt;&gt; 'Asia'</option>
    </select></td>
  </tr>
  <tr>
    <td>Pivot:</td> 
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select avg(F) pivot B'>select avg(F) pivot B</option>
      <option value='select sum(G),max(F) pivot D'>select sum(G),max(F) pivot D</option>
    </select></td>
    <td>Offset / limit: </td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='offset 3'>offset 3</option>
      <option value='limit 5'>limit 5</option>
      <option value='limit 4 offset 2'>limit 4 offset 2</option>
    </select></td>
    <td>Label / Format:</td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value="select A label A 'Manager Name'">select A label A
      'Manager Name'</option>
      <option value="select G format G '00%'">select G format G '00%'</option>
    </select></td>
  </tr>
</table>
</form>
</div>
<table style='width: 100%;'>
  <tr style='font-size: 20px;'>
    <td>Original Table</td>
    <td>Query Table</td>
  </tr>
  <tr>
    <td style="width: 50%; padding: 10px; vertical-align: top;">
    <div id="table"></div>
    </td>
    <td style="width: 50%; padding: 10px; vertical-align: top;">
    <div id="querytable"></div>
    <div style='font-size: 15px; font-weight: bold; padding: 5px;'><input
      type="text" style="width: 100%" id='display-query' /> <br></br>
    <input type="button" value='edit &amp; submit' onclick="setQueryFromUser()" /></div>
    </td>
  </tr>
</table>
</body>
</html>
  1. 程式來源:http://code.google.com/apis/ajax/playground/#more_query_options

方智誼的範例

$(function myfeedload() {   
    $('div[sr]').each(function (i){
      var r=$(this).attr("sr");
      var sheetkey="";
      if ($(this).attr("key"))
          sheetkey=$(this).attr("key");
      var url="http://spreadsheets.google.com/feeds/cells/"+sheetkey+"/od6/public/basic?range="+r+"&alt=json&callback=?";   
      $(this).contents().remove();
      var temp=$(this).append('<span><img src="http://www.google.com/insights/search/resources/1964626681-loading.gif" />Loading...</span>');   
      $(temp).removeAttr('sr');
      $.getJSON(url,function(data){
        $(temp).contents().remove();
        if(data!=null){
        var title=data.feed.entry[0].title.$t;
        var content=data.feed.entry[0].content.$t;
        $(temp).append(content);
        myfeedload();  
      }              
      });
    });
});

Facebook

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License