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!

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.

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:

Append the d3.js code with a map of your sheetsee options

Sheetsee.d3BubbleChart = function(data, options) {
    var tree = {name: "data", children: []}
    var groups = {}

    // data needs to look like this:
    // var data = { name: "wahtever", children: [
    //   { name: "group1", children: [
    //     { name: 'bob', size: 3},
    //     { name: 'judy', size: 5}
    //   ]},
    //   { name: "group2", children: [
    //     { name: 'jim', size: 10},
    //     { name: 'bill', size: 5}
    //   ]}
    // ]}

    data.map(function(r) {
        var groupName = r[options.group]
        groups[groupName] = true
    })

    Object.keys(groups).map(function(groupName) {
        var groupMembers = []
        data.map(function(r) {
            if (r[options.group] !== groupName) return
            groupMembers.push({name: r[options.name], size: r[options.size]})
        })
        tree.children.push({name: groupName, children: groupMembers})
    })

  // the rest of the code

In your HTML call it like so

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
  })

  function showInfo(data) {
    Sheetsee.d3BubbleChart(data, { name: 'name', size: 'cuddlability', group: 'kind', div: '#stuff'})
  }
</script>

There are lots of charts to get excited about in the D3 gallery.

View the entire source