Skip to content

Commit

Permalink
Update raw files
Browse files Browse the repository at this point in the history
  • Loading branch information
jlord committed Mar 19, 2017
1 parent bbb53cc commit 0d1dd3a
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 29 deletions.
12 changes: 5 additions & 7 deletions docs/basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,16 @@ Spreadsheets are a great _lightweight_ databases. Google Spreadsheets in particu
3. Create a place holder `<div>`, with `id`, in your HTML the map or table you want.
4. Create templates for tables in `<script>` tags with an `id` matching the `<div>` plus `_template`.
5. Inside of another `<script>` tag initialize [Tabletop.js](https://github.com/jsoma/tabletop). Once it fetches your spreadsheet data, pass it onto Sheetsee.

```JS
document.addEventListener('DOMContentLoaded', function() {
var URL = 'YOURSPREADSHEETSKEYHERE'
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
document.addEventListener('DOMContentLoaded', function() {
var URL = 'YOURSPREADSHEETSKEYHERE'
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
})
```
6. Define the function that [Tabletop.js](https://github.com/jsoma/tabletop) calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.

```JS
function callback (data) {
// All the Sheetsee things you want to do!
// All the Sheetsee things you want to do!
}
```
7. 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.
Expand Down Expand Up @@ -50,7 +48,7 @@ Ignoring some HTML things to conserve space, you get the point. This is a basic
Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
})
function myData (data) {
All the sheetsee things you want to do!
// All the sheetsee things you want to do!
}
</script>
</body>
Expand Down
16 changes: 7 additions & 9 deletions docs/building.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,18 @@

You can customize your Sheetsee build with just the parts you want to use, for example to only include the mapping module or only the tables module. If you want to just use the full version, you can grab it here at [github.com/jlord/sheetsee.js](https://github.com/jlord/sheetsee.js/blob/master/js/sheetsee.js).

All bundle comes with [Mustache.js](https://mustache.github.io) and [Leaflet.js](http://leafletjs.com). Additionally, you'll need to also include [Tabletop.js](https://github.com/jsoma/tabletop) your HTML head like so:
All builds come with [Mustache.js](https://mustache.github.io) and [Leaflet.js](http://leafletjs.com). Additionally, you'll need to link to [Tabletop.js](https://github.com/jsoma/tabletop) your HTML head like so:

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
<script src="js/sheetsee.j"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
<script src="js/sheetsee.js"></script>
```

**To build a custom Sheetsee you'll need [Node.js](http://www.nodejs.org) on your computer familiarity with the command line.**

#### Get Node/NPM
Download Node.js from [nodejs.org/download](http://nodejs.org/download). For most users you can just download the Mac _.pkg_ or Windows _.msi_. Follow the install instructions; both include npm. Then install `sheetsee`.

Download Node.js from [nodejs.org/download](http://nodejs.org/download). For most users you can just download the Mac _.pkg_ or Windows _.msi_. Follow the install instructions, both include NPM. Once they're installed, proceed:

## Install `sheetsee` from NPM
## Install `sheetsee` from npm
The `sheetsee` (with no '.js') module is the tool for building custom Sheetsee builds. Install `sheetsee` globally and then run it within the folder of your soon-to-be Sheetsee project.

_Install globally_
Expand All @@ -36,6 +34,6 @@ Here are the options for the different modules. If you want save the generated f
- `-t` or `-tables` for tables
- `--save` to write out the file*

_* otherwise, defaults to standardout on your console which you can_ `| pbcopy`
_* otherwise, defaults to standard out on your console which you can_ `| pbcopy`

So for instance, `sheetsee -m -t --save` will build you a Sheetsee.js with the basic **data** functions, the **map** and **tables** sections built in and save it as a file named **sheetsee.js**. Running `sheetsee -m -t | pbcopy` will save the output to your clipboard.
So for instance, `sheetsee -m --save` will build you a Sheetsee with the basic **data** functions and the **map** section, leaving out the tables section. It will save it as a file named '**sheetsee.js**'. Running `sheetsee -m | pbcopy` will save the output to your clipboard.
22 changes: 9 additions & 13 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,41 @@

![sheetseeimg](https://raw.github.com/jlord/sheetsee-cache/master/img/sheetsee-03.png)

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

## Modules

Each of **sheetsee.js**'s features are divided into modules. Use just the parts you need; see docs on [building](./docs/building.md). If you don't want to build your own, you can just use the full library which includes all modules, it's [here on GitHub](http://www.github.com/jlord/sheetsee.js).
Each of Sheetsee's functions are divided into modules. Use just the parts you need; see docs on [building](./docs/building.md). If you don't want to build your own, you can just use the full library which includes all modules, it's [here on GitHub](http://www.github.com/jlord/sheetsee.js).


| Module | Contains | Docs |
| ------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------- |
| **sheetsee-core** | **Included in any build**. Gets you started and has the working-with-your-data functions. | [Doc](./docs/sheetsee-core.md) |
| **sheetsee** | Command line module for make a custom build of Sheetsee. | [Doc](./docs/building.md) |
| **sheetsee-core** | **Included in all builds**. Has helpful working-with-your-data functions. | [Doc](./docs/sheetsee-core.md) |
| **sheetsee-tables** | Contains everything you'll need to create a table including sortable columns, pagination and search.| [Doc](./docs/sheetsee-tables.md) |
| **sheetsee-maps** | For making maps with your point, line or polygon spreadsheet data. Built on Mapbox.js. | [Doc](./docs/sheetsee-maps.md) |
| **sheetsee-charts** | Includes 3 basic d3 charts: bar, line and pie. You can also [use your own](docs/custom-charts.md). | [Doc](./docs/sheetsee-charts.md) |
| **sheetsee-maps** | For making maps with your point, line or polygon spreadsheet data. Built with Leaflet.js. | [Doc](./docs/sheetsee-maps.md) |

## Spreadsheets!?

Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. Read more about using spreadsheets for databases [here](./docs/basics.md).
Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. [Read more](./docs/basics.md) about using spreadsheets for databases.

## In the Wild

What can you make with **Sheetsee.js**? Lots of things, here are some examples:
What can you make with Sheetsee? Lots of things, here are some examples:

- [Hack-Spots](http://jlord.github.io/hack-spots)
- [Combine with IFTTT](http://jlord.us/instagram/)
- [Real Python Support Desk](http://www.realpython.com/support)

**List your sheetsee project here: file an [issue or pull request](http://www.github.com/jlord/sheetsee.js).**

# Resources & Documentation
## Resources & Documentation

More resources on using Sheetsee.js:
More resources on using Sheetsee:

| Getting Started | Ideas | Use | Demos |
| --- | --- | --- | --- |
| [About Sheetsee.js](./docs/about.md) | [Fork-n-Go](./docs/fork-n-go.md) | [Sheetsee-core](./docs/sheetsee-core.md) | [Table Demo](./demos/demo-table.html) |
| [Building Sheetsee](./docs/building.md) | [Tips!](./docs/tips.md) | [Sheetsee-tables](./docs/sheetsee-tables.md) | [Table Demo](./demos/demo-table.html) |
| [Basics](./docs/basics.md) | [Custom charts](./docs/custom-charts.md) | [Sheetsee-maps](./docs/sheetsee-maps.md) | [Map Demo](./demos/demo-map.html) |
| | | [Sheetsee-charts](./docs/sheetsee-charts.md) | [Chart Demo](./demos/demo-chart.html) |

## Note on New Google Spreadsheets

Google recently updated their Google Spreadsheets and the API. For a bit this was breaking things using the old API, including Tabletop. This has been fixed and the latest version of tabletop.js works on both old and new spreadsheets. **Be sure to include at least version 1.3.4 in your project.**

0 comments on commit 0d1dd3a

Please sign in to comment.