Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/code.R

Created October 9, 2013 02:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramnathv/6895452 to your computer and use it in GitHub Desktop.
Save ramnathv/6895452 to your computer and use it in GitHub Desktop.
Download ZIP
Funnel Chart with rCharts and Highcharts
Raw
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
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="http://aozora.github.io/bootplus/assets/css/docs.css">
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'></script>
<script src='http://code.highcharts.com/highcharts-more.js' type='text/javascript'></script>
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'></script>
<script src='http://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 = 'http://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="http://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>
@daroczig
Copy link

Thank you very much, this is fantastic!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment