Waterfall Chart with rCharts and uvCharts by ramnathv

index.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="//getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="//aozora.github.io/bootplus/assets/css/docs.css">
    
    <script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js' type='text/javascript'></script>
    <script src='//imaginea.github.io/uvCharts/js/uvcharts.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 100%;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chartdf5a59da4e54' class='rChart uvcharts'>
            </div> 
          <br/>
<pre><code class='r'># install_github('rCharts', 'ramnathv', ref = 'dev')
require(rCharts)
dat &lt;- read.csv(textConnection('x, y
  &quot;2005 Actual&quot;, 90
  &quot;Price&quot;, 15
  &quot;Volume&quot;, 21
  &quot;Fixes&quot;, -37
  &quot;Taxation&quot;, -43
  &quot;Escalation&quot;, -40
  &quot;Mix&quot;, 46
  &quot;Market Effect&quot;, 91
  &quot;Partners&quot;, 61')
)
uPlot(&quot;x&quot;, &quot;y&quot;, data = dat, type = 'Waterfall')
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <script>
  var chartParamschartdf5a59da4e54 = {
 "dom": "chartdf5a59da4e54",
"width":    700,
"height":    400,
"config": {
 "meta": {
 "position": "#uv-div" 
} 
},
"graphdef": {
 "categories": [
 "data" 
],
"dataset": {
 "data": [
 {
 "name": "  2005 Actual",
"value": 90 
},
{
 "name": "  Price",
"value": 15 
},
{
 "name": "  Volume",
"value": 21 
},
{
 "name": "  Fixes",
"value": -37 
},
{
 "name": "  Taxation",
"value": -43 
},
{
 "name": "  Escalation",
"value": -40 
},
{
 "name": "  Mix",
"value": 46 
},
{
 "name": "  Market Effect",
"value": 91 
},
{
 "name": "  Partners",
"value": 61 
} 
] 
} 
},
"type": "Waterfall",
"id": "chartdf5a59da4e54" 
}
  var graphdefchartdf5a59da4e54 = chartParamschartdf5a59da4e54.graphdef
  var configchartdf5a59da4e54 = chartParamschartdf5a59da4e54.config
  
  configchartdf5a59da4e54.meta.position = '#chartdf5a59da4e54'
  
  var chartchartdf5a59da4e54 = uv.chart(chartParamschartdf5a59da4e54.type, 
    graphdefchartdf5a59da4e54,
    configchartdf5a59da4e54
  );
</script>
    
  </body>
  <!-- Google Prettify -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script 
    src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
  </script>
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</html>

code.R

# install_github('rCharts', 'ramnathv', ref = 'dev')
require(rCharts)
dat <- read.csv(textConnection('x, y
  "2005 Actual", 90
  "Price", 15
  "Volume", 21
  "Fixes", -37
  "Taxation", -43
  "Escalation", -40
  "Mix", 46
  "Market Effect", 91
  "Partners", 61')
)
uPlot("x", "y", data = dat, type = 'Waterfall')