rCharts + jQuery datatables | Infinite Scroll & Adjust Width

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.

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css'>
    <link rel='stylesheet' href="https://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="https://aozora.github.io/bootplus/assets/css/docs.css">
    
    <script src='https://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>
    <script src='https://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>
  
  <script src="https://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>

Modified http://code.jquery.com/jquery-1.10.2.min.js to a secure url

Modified http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js to a secure url

https://code.jquery.com/jquery-1.10.2.min.js

https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js

https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js