Funnel Chart with rCharts and Highcharts 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='//code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/highcharts.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/highcharts-more.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/modules/exporting.js' type='text/javascript'></script>
    <script src='//github.highcharts.com/rambera/modules/funnel.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart11991316c1a22' class='rChart highcharts'>
            </div> 
          <br/>
<pre><code class='r'># install from html_assets branch
# install_github(&quot;rCharts&quot;, &quot;ramnathv&quot;, ref = &quot;html_assets&quot;)

# utility function to convert data frame to format required for funnel
make_dataset = function(x, y, data){
  require(rCharts)
  toJSONArray2(data[c(x, y)], json = F, names = F)
}

options(stringsAsFactors = F)
dat = data.frame(
  x = c('Visits', 'Downloads', 'Requested price list', 'Invoice', 'Finalized'),
  y = c(15654, 4064, 1987, 976, 846)
)

h1 &lt;- Highcharts$new()
h1$chart(type = 'funnel')
h1$series(data = make_dataset('x', 'y', dat))
h1$addAssets(js = '//github.highcharts.com/rambera/modules/funnel.js')
h1
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <script type='text/javascript'>
    (function($){
        $(function () {
            var chart = new Highcharts.Chart({
 "dom": "chart11991316c1a22",
"width":    700,
"height":    400,
"credits": {
 "href": null,
"text": null 
},
"exporting": {
 "enabled": false 
},
"title": {
 "text": null 
},
"yAxis": {
 "title": {
 "text": null 
} 
},
"chart": {
 "type": "funnel",
"renderTo": "chart11991316c1a22" 
},
"series": [
 {
 "data": [
 [
 "Visits",
 15654 
],
[
 "Downloads",
  4064 
],
[
 "Requested price list",
  1987 
],
[
 "Invoice",
   976 
],
[
 "Finalized",
   846 
] 
] 
} 
],
"id": "chart11991316c1a22" 
});
        });
    })(jQuery);
</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 from html_assets branch
# install_github("rCharts", "ramnathv", ref = "html_assets")

# utility function to convert data frame to format required for funnel
make_dataset = function(x, y, data){
  require(rCharts)
  toJSONArray2(data[c(x, y)], json = F, names = F)
}

options(stringsAsFactors = F)
dat = data.frame(
  x = c('Visits', 'Downloads', 'Requested price list', 'Invoice', 'Finalized'),
  y = c(15654, 4064, 1987, 976, 846)
)

h1 <- Highcharts$new()
h1$chart(type = 'funnel')
h1$series(data = make_dataset('x', 'y', dat))
h1$addAssets(js = 'http://github.highcharts.com/rambera/modules/funnel.js')
h1