-
-
Save ramnathv/6033591 to your computer and use it in GitHub Desktop.
rCharts + jQuery DataTables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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: 800px; | |
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/> | |
<pre><code class='r'>require(rCharts) | |
dt <- dTable( | |
iris, | |
bScrollInfinite = T, | |
bScrollCollapse = T, | |
sScrollY = "200px", | |
width = "500px" | |
) | |
dt</code></pre> | |
</div> | |
</div> | |
</div> | |
<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