Examples

It is different from other javascript charting libraries because:

• Configuration is by dynamic functions, allowing for a really compact API (very few options)
• Non-core layout is done via CSS rather than code

Introduction

(Introduction to TufteGraph - if your eyes aren't that good, here's a high-res version)

API

jQuery(document).ready(function () {
  jQuery('#awesome-graph').tufteBar({
    data: [
      // First element is the y-value
      // Other elements are arbitary - they are not used by the lib
      // but are passed back into callback functions
      [1.0, {label: 'Dog'}],
      [1.3, {label: 'Raccoon'}],
      // etc...

      // For stacked graphs, pass an array of non-cumulative y values
      [[1.5, 1.0, 0.51], {label: '2005'}]
    ],

    // Any of the following properties can be either static values 
    // or a function that will be called for each data point. 
    // For functions, 'this' will be set to the current data element, 
    // just like jQuery's $.each

    // Bar width in arbitrary units, 1.0 means the bars will be snuggled
    // up next to each other
    barWidth: 0.8, 

    // The label on top of the bar - can contain HTML
    // formatNumber inserts commas as thousands separators in a number
    barLabel:  function(index) { 
      return $.tufteBar.formatNumber(this[0]) + 'x' 
    }, 

    // The label on the x-axis - can contain HTML
    axisLabel: function(index) { return this[1].label }, 

    // The color of the bar
    color:     function(index) { 
      return ['#E57536', '#82293B'][index % 2] 
    },

    // Stacked graphs also pass a stackedIndex parameter
    color:     function(index, stackedIndex) { 
      return ['#E57536', '#82293B'][stackedIndex % 2] 
    },

    // Alternatively, you can just override the default colors and keep
    // the built in color functions
    colors: ['#82293B', '#E57536', '#FFBE33'],
 
    // Legend is optional
    legend: {
      // Data can be an array of any type of object, but the default
      // formatter works with strings
      data: ["North", "East", "West"],

      // By default, the colors of the graph are used
      color: function(index) { 
        return ['#E57536', '#82293B'][index % 2] 
      },

      // You can customize the element label - can contain HTML
      label: function(index) { return this }
    }
  });
});

That's it. Have a look at the integration tests for a few combinations.

Hot Tips

• You need to be using jQuery and also the jQuery enumerable plugin (included). View source on this page if you don't quite get it.
• By default your graph won't be that pretty because it needs to be styled. I recommend tufte-graph.css as a good starting point.
• Find beautiful colors for your graphs at ColourLovers.
• I have tested this in Firefox 3 and Safari 3 and nothing else. Buyer beware.
• Read Tufte's The Visual Display of Quantitative Information, it'll blow your mind. Your graphs will never be the same again.
• Email me the cool graphs you make, I really dig graphs.
• If you're going to make changes to this library, please fork on github and share the love.