A d3 "plugin" to create waterfall charts
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
libs revamping code May 19, 2013
scripts updating waterfall May 20, 2013
styles first comimt May 2, 2013
README.md updates May 3, 2013
index.html updating waterfall May 20, 2013

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