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.
Thanks to tireless efforts of @ramnathv Ramnath Vaidyanathan.
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css'>
<link rel='stylesheet' href="//twitter.github.io/bootstrap/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.10.2.min.js' type='text/javascript'></script>
<script src='//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='chart311c5fad1868' class='rChart datatables'></table>
<br/><br/>
<pre><code class='r'>require(rCharts)
dt <- dTable(
iris,
sPaginationType= "full_numbers";
)
dt</code></pre>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var chartParams = {
"dom": "chart311c5fad1868",
"width": 720,
"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"
}
],
"sPaginationType": "full_numbers"
},
"id": "chart311c5fad1868"
}
$('#'+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="//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>