Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/README.md

Forked from timelyportfolio/Readme.md
Last active December 19, 2015 23:18
Show Gist options
  • Save ramnathv/6033645 to your computer and use it in GitHub Desktop.
Save ramnathv/6033645 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.

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment