diff --git a/docs/custom-charts.md b/docs/custom-charts.md index b87cd1d4..53476a61 100644 --- a/docs/custom-charts.md +++ b/docs/custom-charts.md @@ -1,6 +1,6 @@ # Custom Charts -It's easy to take a d3.js chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too! +It's easy to take a [D3.js](http://d3js.org/) chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too! Sheetsee charts currently work by taking in some options, like so: @@ -8,9 +8,9 @@ Sheetsee charts currently work by taking in some options, like so: var pieOptions = {labels: "name", units: "units", m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"} ``` -The _labels_ represent the actual thing you're charting and _units_ are how many of those things. Margin, width and height are _m, w, h_ and the div to build your chart in is _div_. Finally, you can supply a highlight color if you want. +The _labels_ represent the actual thing you're charting and _units_ are how many of those things. Margin, width and height are _m, w, h_ and the `
` to build your chart in is _div_. Finally, you can supply a highlight color if you want. -So, your chart could take the same options, but map them into your d3 code with the correct variables. An example from [maxogden/sheetsee-d3bubble](https://github.com/maxogden/sheetsee-d3bubble): +So, your chart could take the same options, but map them into your D3 code with the correct variables. An example from [maxogden/sheetsee-d3bubble](https://github.com/maxogden/sheetsee-d3bubble): _Append the d3.js code with a map of your sheetsee options_ @@ -55,7 +55,7 @@ _In your HTML call it like so_ ``` -_View the [entire source](https://github.com/maxogden/sheetsee-d3bubble)_ +There are lots of charts to get excited about in the [D3 gallery](https://github.com/mbostock/d3/wiki/Gallery). +_View the [entire source](https://github.com/maxogden/sheetsee-d3bubble)_ diff --git a/docs/sheetsee-charts.md b/docs/sheetsee-charts.md index 0a1f7db6..a02ea045 100644 --- a/docs/sheetsee-charts.md +++ b/docs/sheetsee-charts.md @@ -2,7 +2,7 @@ _[View Demo](/demos/demo-chart.html)_ -Sheetsee.js provides three [d3.js](http://d3js.org/) chart options to use with your spreadsheet data: a bar chart, line graph and pie chart. You can also use a custom d3.js chart with Sheetsee, read about that [here](custom-charts.md). +Sheetsee.js provides three [D3.js](http://d3js.org/) chart options to use with your spreadsheet data: a bar chart, line graph and pie chart. You can also use a custom D3 chart with Sheetsee, read about that [here](custom-charts.md). ## Make a Chart @@ -10,7 +10,7 @@ Each chart requires your data be an _array of objects_, with objects containing Experiment with the charts to find the correct size your `
` will need to be to hold the chart with your data in it nicely. -You can also make your own d3 chart in a separate .js file, link to that in your HTML head and pass your data on to it after Tabletop.js returns. Information [here](docs/custom-charts.md) on using your own chart. +You can also make your own D3 chart in a separate .js file, link to that in your HTML head and pass your data on to it after Tabletop.js returns. Information [here](custom-charts.md) on using your own chart. ### Bar Chart diff --git a/site/docs/custom-charts.html b/site/docs/custom-charts.html index 9e839ffe..f3f5fef9 100644 --- a/site/docs/custom-charts.html +++ b/site/docs/custom-charts.html @@ -18,7 +18,7 @@

Custom Charts

-

It's easy to take a d3.js chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too!

+

It's easy to take a d3.js chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too!

Sheetsee charts currently work by taking in some options, like so:

var pieOptions = {labels: "name", units: "units", m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"}
@@ -61,7 +61,7 @@

Custom Charts

<script type="text/javascript">
   document.addEventListener('DOMContentLoaded', function() {
     var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
-    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) 
+    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
   })
 
   function showInfo(data) {
diff --git a/site/docs/sheetsee-charts.html b/site/docs/sheetsee-charts.html
index 71a0abdc..80f6f643 100644
--- a/site/docs/sheetsee-charts.html
+++ b/site/docs/sheetsee-charts.html
@@ -23,7 +23,7 @@ 
Sheetsee-charts

 
Make a Chart

 
Each chart requires your data be an array of objects, with objects containing label and units key/value pairs.

 
Experiment with the charts to find the correct size your <div> will need to be to hold the chart with your data in it nicely.

-
You can also make your own d3 chart in a separate .js file, link to that in your HTML head and pass your data on to it after Tabletop.js returns. Information here on using your own chart.

+
You can also make your own d3 chart in a separate .js file, link to that in your HTML head and pass your data on to it after Tabletop.js returns. Information here on using your own chart.

 
Bar Chart

 
To create a bar chart you'll need to add a placeholder <div> in your HTML with an id.

 
<div id="barChart"></div>