Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active December 19, 2015 23:18
Show Gist options
  • Save timelyportfolio/6033232 to your computer and use it in GitHub Desktop.
Save timelyportfolio/6033232 to your computer and use it in GitHub Desktop.
Download ZIP
rCharts + jQuery datatables | Infinite Scroll & Adjust Width
Raw
Readme.md

This is a quick demo of how to use rCharts to create interactive tables using jquery DataTables. The datatables plugin has several nifty features, and rCharts exposes the complete API of datatables, making it really easy to create, customize and share interactive tables. We will be posting more examples to the gallery that will explore different customization options. This adjust width and adds infinite scroll to our basic example.

Thanks to tireless efforts of @ramnathv Ramnath Vaidyanathan.

Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css'>
<link rel='stylesheet' href="http://twitter.github.io/bootstrap/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.10.2.min.js' type='text/javascript'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 720px;
height: 400px;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span8 bs-docs-example'>
<table id='chart311c38124c35' class='rChart datatables'></table>
<br/><br/>
<pre><code>
require(rCharts)
dt <- dTable(
iris,
bScrollInfinite = T,
bScrollCollapse = T,
sScrollY = "200px",
width = "500px"
)
dt
</code></pre>
</div>
</div>
</div>
<table id='chart311c38124c35' class='rChart datatables'></table>
<script type="text/javascript" charset="utf-8">
var chartParams = {
"dom": "chart311c38124c35",
"width": 800,
"height": 400,
"table": {
"aaData": [
[
5.1,
3.5,
1.4,
0.2,
"setosa"
],
[
4.9,
3,
1.4,
0.2,
"setosa"
],
[
4.7,
3.2,
1.3,
0.2,
"setosa"
],
[
4.6,
3.1,
1.5,
0.2,
"setosa"
],
[
5,
3.6,
1.4,
0.2,
"setosa"
],
[
5.4,
3.9,
1.7,
0.4,
"setosa"
],
[
4.6,
3.4,
1.4,
0.3,
"setosa"
],
[
5,
3.4,
1.5,
0.2,
"setosa"
],
[
4.4,
2.9,
1.4,
0.2,
"setosa"
],
[
4.9,
3.1,
1.5,
0.1,
"setosa"
],
[
5.4,
3.7,
1.5,
0.2,
"setosa"
],
[
4.8,
3.4,
1.6,
0.2,
"setosa"
],
[
4.8,
3,
1.4,
0.1,
"setosa"
],
[
4.3,
3,
1.1,
0.1,
"setosa"
],
[
5.8,
4,
1.2,
0.2,
"setosa"
],
[
5.7,
4.4,
1.5,
0.4,
"setosa"
],
[
5.4,
3.9,
1.3,
0.4,
"setosa"
],
[
5.1,
3.5,
1.4,
0.3,
"setosa"
],
[
5.7,
3.8,
1.7,
0.3,
"setosa"
],
[
5.1,
3.8,
1.5,
0.3,
"setosa"
],
[
5.4,
3.4,
1.7,
0.2,
"setosa"
],
[
5.1,
3.7,
1.5,
0.4,
"setosa"
],
[
4.6,
3.6,
1,
0.2,
"setosa"
],
[
5.1,
3.3,
1.7,
0.5,
"setosa"
],
[
4.8,
3.4,
1.9,
0.2,
"setosa"
],
[
5,
3,
1.6,
0.2,
"setosa"
],
[
5,
3.4,
1.6,
0.4,
"setosa"
],
[
5.2,
3.5,
1.5,
0.2,
"setosa"
],
[
5.2,
3.4,
1.4,
0.2,
"setosa"
],
[
4.7,
3.2,
1.6,
0.2,
"setosa"
],
[
4.8,
3.1,
1.6,
0.2,
"setosa"
],
[
5.4,
3.4,
1.5,
0.4,
"setosa"
],
[
5.2,
4.1,
1.5,
0.1,
"setosa"
],
[
5.5,
4.2,
1.4,
0.2,
"setosa"
],
[
4.9,
3.1,
1.5,
0.2,
"setosa"
],
[
5,
3.2,
1.2,
0.2,
"setosa"
],
[
5.5,
3.5,
1.3,
0.2,
"setosa"
],
[
4.9,
3.6,
1.4,
0.1,
"setosa"
],
[
4.4,
3,
1.3,
0.2,
"setosa"
],
[
5.1,
3.4,
1.5,
0.2,
"setosa"
],
[
5,
3.5,
1.3,
0.3,
"setosa"
],
[
4.5,
2.3,
1.3,
0.3,
"setosa"
],
[
4.4,
3.2,
1.3,
0.2,
"setosa"
],
[
5,
3.5,
1.6,
0.6,
"setosa"
],
[
5.1,
3.8,
1.9,
0.4,
"setosa"
],
[
4.8,
3,
1.4,
0.3,
"setosa"
],
[
5.1,
3.8,
1.6,
0.2,
"setosa"
],
[
4.6,
3.2,
1.4,
0.2,
"setosa"
],
[
5.3,
3.7,
1.5,
0.2,
"setosa"
],
[
5,
3.3,
1.4,
0.2,
"setosa"
],
[
7,
3.2,
4.7,
1.4,
"versicolor"
],
[
6.4,
3.2,
4.5,
1.5,
"versicolor"
],
[
6.9,
3.1,
4.9,
1.5,
"versicolor"
],
[
5.5,
2.3,
4,
1.3,
"versicolor"
],
[
6.5,
2.8,
4.6,
1.5,
"versicolor"
],
[
5.7,
2.8,
4.5,
1.3,
"versicolor"
],
[
6.3,
3.3,
4.7,
1.6,
"versicolor"
],
[
4.9,
2.4,
3.3,
1,
"versicolor"
],
[
6.6,
2.9,
4.6,
1.3,
"versicolor"
],
[
5.2,
2.7,
3.9,
1.4,
"versicolor"
],
[
5,
2,
3.5,
1,
"versicolor"
],
[
5.9,
3,
4.2,
1.5,
"versicolor"
],
[
6,
2.2,
4,
1,
"versicolor"
],
[
6.1,
2.9,
4.7,
1.4,
"versicolor"
],
[
5.6,
2.9,
3.6,
1.3,
"versicolor"
],
[
6.7,
3.1,
4.4,
1.4,
"versicolor"
],
[
5.6,
3,
4.5,
1.5,
"versicolor"
],
[
5.8,
2.7,
4.1,
1,
"versicolor"
],
[
6.2,
2.2,
4.5,
1.5,
"versicolor"
],
[
5.6,
2.5,
3.9,
1.1,
"versicolor"
],
[
5.9,
3.2,
4.8,
1.8,
"versicolor"
],
[
6.1,
2.8,
4,
1.3,
"versicolor"
],
[
6.3,
2.5,
4.9,
1.5,
"versicolor"
],
[
6.1,
2.8,
4.7,
1.2,
"versicolor"
],
[
6.4,
2.9,
4.3,
1.3,
"versicolor"
],
[
6.6,
3,
4.4,
1.4,
"versicolor"
],
[
6.8,
2.8,
4.8,
1.4,
"versicolor"
],
[
6.7,
3,
5,
1.7,
"versicolor"
],
[
6,
2.9,
4.5,
1.5,
"versicolor"
],
[
5.7,
2.6,
3.5,
1,
"versicolor"
],
[
5.5,
2.4,
3.8,
1.1,
"versicolor"
],
[
5.5,
2.4,
3.7,
1,
"versicolor"
],
[
5.8,
2.7,
3.9,
1.2,
"versicolor"
],
[
6,
2.7,
5.1,
1.6,
"versicolor"
],
[
5.4,
3,
4.5,
1.5,
"versicolor"
],
[
6,
3.4,
4.5,
1.6,
"versicolor"
],
[
6.7,
3.1,
4.7,
1.5,
"versicolor"
],
[
6.3,
2.3,
4.4,
1.3,
"versicolor"
],
[
5.6,
3,
4.1,
1.3,
"versicolor"
],
[
5.5,
2.5,
4,
1.3,
"versicolor"
],
[
5.5,
2.6,
4.4,
1.2,
"versicolor"
],
[
6.1,
3,
4.6,
1.4,
"versicolor"
],
[
5.8,
2.6,
4,
1.2,
"versicolor"
],
[
5,
2.3,
3.3,
1,
"versicolor"
],
[
5.6,
2.7,
4.2,
1.3,
"versicolor"
],
[
5.7,
3,
4.2,
1.2,
"versicolor"
],
[
5.7,
2.9,
4.2,
1.3,
"versicolor"
],
[
6.2,
2.9,
4.3,
1.3,
"versicolor"
],
[
5.1,
2.5,
3,
1.1,
"versicolor"
],
[
5.7,
2.8,
4.1,
1.3,
"versicolor"
],
[
6.3,
3.3,
6,
2.5,
"virginica"
],
[
5.8,
2.7,
5.1,
1.9,
"virginica"
],
[
7.1,
3,
5.9,
2.1,
"virginica"
],
[
6.3,
2.9,
5.6,
1.8,
"virginica"
],
[
6.5,
3,
5.8,
2.2,
"virginica"
],
[
7.6,
3,
6.6,
2.1,
"virginica"
],
[
4.9,
2.5,
4.5,
1.7,
"virginica"
],
[
7.3,
2.9,
6.3,
1.8,
"virginica"
],
[
6.7,
2.5,
5.8,
1.8,
"virginica"
],
[
7.2,
3.6,
6.1,
2.5,
"virginica"
],
[
6.5,
3.2,
5.1,
2,
"virginica"
],
[
6.4,
2.7,
5.3,
1.9,
"virginica"
],
[
6.8,
3,
5.5,
2.1,
"virginica"
],
[
5.7,
2.5,
5,
2,
"virginica"
],
[
5.8,
2.8,
5.1,
2.4,
"virginica"
],
[
6.4,
3.2,
5.3,
2.3,
"virginica"
],
[
6.5,
3,
5.5,
1.8,
"virginica"
],
[
7.7,
3.8,
6.7,
2.2,
"virginica"
],
[
7.7,
2.6,
6.9,
2.3,
"virginica"
],
[
6,
2.2,
5,
1.5,
"virginica"
],
[
6.9,
3.2,
5.7,
2.3,
"virginica"
],
[
5.6,
2.8,
4.9,
2,
"virginica"
],
[
7.7,
2.8,
6.7,
2,
"virginica"
],
[
6.3,
2.7,
4.9,
1.8,
"virginica"
],
[
6.7,
3.3,
5.7,
2.1,
"virginica"
],
[
7.2,
3.2,
6,
1.8,
"virginica"
],
[
6.2,
2.8,
4.8,
1.8,
"virginica"
],
[
6.1,
3,
4.9,
1.8,
"virginica"
],
[
6.4,
2.8,
5.6,
2.1,
"virginica"
],
[
7.2,
3,
5.8,
1.6,
"virginica"
],
[
7.4,
2.8,
6.1,
1.9,
"virginica"
],
[
7.9,
3.8,
6.4,
2,
"virginica"
],
[
6.4,
2.8,
5.6,
2.2,
"virginica"
],
[
6.3,
2.8,
5.1,
1.5,
"virginica"
],
[
6.1,
2.6,
5.6,
1.4,
"virginica"
],
[
7.7,
3,
6.1,
2.3,
"virginica"
],
[
6.3,
3.4,
5.6,
2.4,
"virginica"
],
[
6.4,
3.1,
5.5,
1.8,
"virginica"
],
[
6,
3,
4.8,
1.8,
"virginica"
],
[
6.9,
3.1,
5.4,
2.1,
"virginica"
],
[
6.7,
3.1,
5.6,
2.4,
"virginica"
],
[
6.9,
3.1,
5.1,
2.3,
"virginica"
],
[
5.8,
2.7,
5.1,
1.9,
"virginica"
],
[
6.8,
3.2,
5.9,
2.3,
"virginica"
],
[
6.7,
3.3,
5.7,
2.5,
"virginica"
],
[
6.7,
3,
5.2,
2.3,
"virginica"
],
[
6.3,
2.5,
5,
1.9,
"virginica"
],
[
6.5,
3,
5.2,
2,
"virginica"
],
[
6.2,
3.4,
5.4,
2.3,
"virginica"
],
[
5.9,
3,
5.1,
1.8,
"virginica"
]
],
"aoColumns": [
{
"sTitle": "Sepal.Length"
},
{
"sTitle": "Sepal.Width"
},
{
"sTitle": "Petal.Length"
},
{
"sTitle": "Petal.Width"
},
{
"sTitle": "Species"
}
],
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"width": "500px"
},
"id": "chart311c38124c35"
}
$('#'+chartParams.id).removeClass("rChart")
$(document).ready(function() {
var dTable = $('#' + chartParams.dom).dataTable(
chartParams.table
);
$('#'+chartParams.id+"_wrapper").css("width",chartParams.width) //first use rCharts width
$('#'+chartParams.id+"_wrapper").css("width",chartParams.table.width) //then if specified change to table width
$('#'+chartParams.id+"_wrapper").css("margin-left", "auto");
$('#'+chartParams.id+"_wrapper").css("margin-right", "auto");
dTable.fnAdjustColumnSizing();
});
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment