A d3 "plugin" to create waterfall charts
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
libs
scripts
styles
README.md
index.html

README.md

D3 WATERFALL CHART

v.0.0.2

You basically provide an object to the Waterfall function and it will spit out a waterfall chart. You will need a container in you HTML which ID matches the container property of the config object like so

  
    ‹body›
       ‹div id="chart"› ‹/div›
       ‹script src="libs/d3.v3.min.js"› ‹/script›
     ‹/body›
  

Once the HTML is set you create the config object as follows

  
  var waterfall = {
      container:'chart',
      width:400,
      height:800,
      fontSize:10,
      borderRadius:5,
      horizontalGridLines:true,
      series:[
        {'value':253},
        {'value':417},
        {'value':1440},
        .
        .
        .
        .
      ]
    }
  

After creating the conf object you simply pass it as a parameter to createWaterfall() function like so

  
    createWaterfall(waterfall);
  

Todos

  • Need to add support for labels on each row
  • Add config for format
  • Add config for horizontal display
  • Add config for animation