2015-10-12

20151012 Data Visualization with Sheetsee.js

Sheetsee.js:



Sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts.

The Short & Sweet

  1. Link to Sheetsee.js, tabletop.js and jQuery in your HTML head.
  2. Create a place holder <div> in your HTML for any chart, map or table you want to have.
  3. Create templates for tables in <script> tags.
  4. Inside of a <script> tag initialize Tabletop.js. It waits for the document to load and then initializes tabletop and calls back a function when it has returned with the spreadsheet data.
    document.addEventListener('DOMContentLoaded', function() {
    var gData var URL = "YOURSPREADSHEETSKEYHERE" Tabletop.init( { key: URL, callback: callback, simpleSheet: true } ) })
  5. Define the function that Tabletop.js calls when it returns with the data. This function will contain all the Sheetsee.js functions that you use for the maps, charts and tables you desire. Style it up with some CSS.
    function callback(data) {
    // All the sheetsee things you want to do! }
  6. Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.

Minimal Setup
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tabletop.js"></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<link rel="stylesheet" type="text/css" href="css/sss.css">
</head>
<body>
<div id="placeholder"></div>

<script id="placeholder" type="text/html">
// template if you so desire!
</script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var URL = "YOURSPREADSHEETSKEYHERE"
Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
})
function myData(data) {
All the sheetsee things you want to do!
}
</script>
</body>