Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active December 19, 2015 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timelyportfolio/6033141 to your computer and use it in GitHub Desktop.
Save timelyportfolio/6033141 to your computer and use it in GitHub Desktop.
Download ZIP
rCharts + jQuery DataTables | Basic
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.

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='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="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>
@ramnathv
Copy link

Can you remove the extraneous semicolon in the code?

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