In rCharts issue #458, the question asked was
How do I sort with scientific notation as shown in Datatables scientific sorting plugin?
Here is a sample set of code how we can accomplish this using a modified iris dataset. To see it, go to the rCharts viewer or play with it live.
iris_sc <- iris
#randomly make these numbers exponentially large to be able to visually verify result
iris_sc[,-5] <- format(iris_sc[,-5]*10^runif(nrow(iris),1,10),scientific=T)
dt <- dTable(
iris_sc[sample(1:nrow(iris_sc),50),]
)
#add the scientific sort from http://next.datatables.net/plug-ins/sorting/scientific
#easier to add in script than to add to jshead
dt$setTemplate(chartDiv = sprintf('%s
<script>
%s
</script>
',
dt$templates$chartDiv,
'jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"scientific-pre": function ( a ) {
return parseFloat(a);
},
"scientific-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"scientific-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
'
))
#hack with lapply; I think there is a better way to do
#but this sets type to scientific for all columns
#except the last which is species
dt$params$table$aoColumns[-ncol(iris_sc)] <- lapply(
dt$params$table$aoColumns[-ncol(iris_sc)],
function(x){
x$sType = "scientific"
return(x)
}
)
dt<!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'>
<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: 800px;
height: 400px;
}
</style>
</head>
<body >
<table id = 'chart5045cbf79c9' class = 'rChart datatables'></table>
<script>
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"scientific-pre": function ( a ) {
return parseFloat(a);
},
"scientific-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"scientific-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
</script>
<script type="text/javascript" charset="utf-8">
var chartParamschart5045cbf79c9 = {
"dom": "chart5045cbf79c9",
"width": 800,
"height": 400,
"table": {
"aaData": [
[
[ "1.735965e+10" ],
[ "8.012146e+09" ],
[ "1.388772e+10" ],
[ "5.341431e+09" ],
"virginica"
],
[
[ "5.847985e+08" ],
[ "2.923993e+08" ],
[ "4.954543e+08" ],
[ "2.030550e+08" ],
"virginica"
],
[
[ "1.432867e+07" ],
[ "6.908464e+06" ],
[ "1.074650e+07" ],
[ "3.326298e+06" ],
"versicolor"
],
[
[ "1.777896e+09" ],
[ "9.040151e+08" ],
[ "1.536826e+09" ],
[ "5.424091e+08" ],
"virginica"
],
[
[ "5.853284e+05" ],
[ "4.071850e+05" ],
[ "1.781434e+05" ],
[ "2.544906e+04" ],
"setosa"
],
[
[ "2.531667e+02" ],
[ "1.388334e+02" ],
[ "2.205000e+02" ],
[ "9.391669e+01" ],
"virginica"
],
[
[ "9.977767e+05" ],
[ "4.434563e+05" ],
[ "8.077240e+05" ],
[ "2.375659e+05" ],
"virginica"
],
[
[ "4.684111e+03" ],
[ "2.303661e+03" ],
[ "3.762646e+03" ],
[ "1.382197e+03" ],
"virginica"
],
[
[ "7.233276e+01" ],
[ "3.496083e+01" ],
[ "5.424957e+01" ],
[ "1.808319e+01" ],
"versicolor"
],
[
[ "6.931857e+06" ],
[ "4.364502e+06" ],
[ "2.182251e+06" ],
[ "2.567354e+05" ],
"setosa"
],
[
[ "8.030004e+07" ],
[ "5.139203e+07" ],
[ "1.927201e+07" ],
[ "3.212002e+06" ],
"setosa"
],
[
[ "5.129519e+09" ],
[ "3.704653e+09" ],
[ "1.234884e+09" ],
[ "3.799644e+08" ],
"setosa"
],
[
[ "2.087479e+05" ],
[ "1.478631e+05" ],
[ "6.958263e+04" ],
[ "8.697829e+03" ],
"setosa"
],
[
[ "7.219356e+03" ],
[ "3.340299e+03" ],
[ "6.034088e+03" ],
[ "2.586038e+03" ],
"virginica"
],
[
[ "2.073434e+02" ],
[ "1.451404e+02" ],
[ "5.390929e+01" ],
[ "1.244061e+01" ],
"setosa"
],
[
[ "5.518871e+07" ],
[ "2.553507e+07" ],
[ "3.624333e+07" ],
[ "1.153197e+07" ],
"versicolor"
],
[
[ "2.630425e+07" ],
[ "1.426671e+07" ],
[ "2.140007e+07" ],
[ "8.025025e+06" ],
"versicolor"
],
[
[ "1.237287e+07" ],
[ "5.399069e+06" ],
[ "8.548526e+06" ],
[ "2.474573e+06" ],
"versicolor"
],
[
[ "2.894593e+07" ],
[ "1.822521e+07" ],
[ "8.040535e+06" ],
[ "2.144143e+06" ],
"setosa"
],
[
[ "1.112515e+02" ],
[ "7.184994e+01" ],
[ "3.708384e+01" ],
[ "4.635480e+00" ],
"setosa"
],
[
[ "1.056704e+05" ],
[ "3.568092e+04" ],
[ "9.469167e+04" ],
[ "3.156389e+04" ],
"virginica"
],
[
[ "2.028769e+03" ],
[ "1.352513e+03" ],
[ "6.050715e+02" ],
[ "1.067773e+02" ],
"setosa"
],
[
[ "4.888040e+06" ],
[ "3.226107e+06" ],
[ "1.368651e+06" ],
[ "1.955216e+05" ],
"setosa"
],
[
[ "2.436882e+05" ],
[ "1.200256e+05" ],
[ "2.073169e+05" ],
[ "9.092845e+04" ],
"virginica"
],
[
[ "3.494484e+07" ],
[ "1.651938e+07" ],
[ "2.795587e+07" ],
[ "7.624329e+06" ],
"versicolor"
],
[
[ "1.162985e+05" ],
[ "8.399338e+04" ],
[ "3.661250e+04" ],
[ "8.614705e+03" ],
"setosa"
],
[
[ "2.132092e+10" ],
[ "1.116810e+10" ],
[ "1.590609e+10" ],
[ "5.414838e+09" ],
"versicolor"
],
[
[ "6.711799e+04" ],
[ "3.080826e+04" ],
[ "4.401180e+04" ],
[ "1.430383e+04" ],
"versicolor"
],
[
[ "3.080463e+06" ],
[ "1.222406e+06" ],
[ "2.444812e+06" ],
[ "9.290284e+05" ],
"virginica"
],
[
[ "1.148156e+09" ],
[ "5.666226e+08" ],
[ "9.990450e+08" ],
[ "3.280446e+08" ],
"virginica"
],
[
[ "1.337552e+07" ],
[ "6.226535e+06" ],
[ "9.455108e+06" ],
[ "2.306124e+06" ],
"versicolor"
],
[
[ "8.899716e+07" ],
[ "4.362606e+07" ],
[ "5.235127e+07" ],
[ "1.919547e+07" ],
"versicolor"
],
[
[ "2.735760e+04" ],
[ "1.196895e+04" ],
[ "2.393790e+04" ],
[ "8.976713e+03" ],
"virginica"
],
[
[ "4.334471e+05" ],
[ "2.000525e+05" ],
[ "3.667630e+05" ],
[ "1.200315e+05" ],
"virginica"
],
[
[ "1.098623e+03" ],
[ "7.470640e+02" ],
[ "3.295870e+02" ],
[ "4.394494e+01" ],
"setosa"
],
[
[ "2.111728e+02" ],
[ "9.770682e+01" ],
[ "1.481361e+02" ],
[ "4.727749e+01" ],
"versicolor"
],
[
[ "1.001948e+05" ],
[ "4.501503e+04" ],
[ "7.115279e+04" ],
[ "2.178147e+04" ],
"versicolor"
],
[
[ "9.784791e+05" ],
[ "6.190378e+05" ],
[ "2.995344e+05" ],
[ "1.996896e+04" ],
"setosa"
],
[
[ "1.270184e+10" ],
[ "8.716951e+09" ],
[ "3.486780e+09" ],
[ "4.981115e+08" ],
"setosa"
],
[
[ "2.174460e+09" ],
[ "9.707411e+08" ],
[ "1.514356e+09" ],
[ "4.271261e+08" ],
"versicolor"
],
[
[ "5.424137e+04" ],
[ "2.712069e+04" ],
[ "3.813846e+04" ],
[ "1.271282e+04" ],
"versicolor"
],
[
[ "2.986130e+03" ],
[ "2.084657e+03" ],
[ "8.451312e+02" ],
[ "1.126842e+02" ],
"setosa"
],
[
[ "3.455980e+02" ],
[ "2.329030e+02" ],
[ "1.126950e+02" ],
[ "1.502600e+01" ],
"setosa"
],
[
[ "2.766291e+07" ],
[ "1.360471e+07" ],
[ "2.086056e+07" ],
[ "6.348866e+06" ],
"versicolor"
],
[
[ "3.171925e+06" ],
[ "1.163039e+06" ],
[ "2.114617e+06" ],
[ "5.286541e+05" ],
"versicolor"
],
[
[ "3.587773e+09" ],
[ "1.594566e+09" ],
[ "2.989811e+09" ],
[ "8.969432e+08" ],
"virginica"
],
[
[ "1.554752e+05" ],
[ "7.091852e+04" ],
[ "9.546724e+04" ],
[ "2.727635e+04" ],
"versicolor"
],
[
[ "8.895792e+03" ],
[ "5.816480e+03" ],
[ "2.395021e+03" ],
[ "3.421459e+02" ],
"setosa"
],
[
[ "1.242287e+07" ],
[ "4.700546e+06" ],
[ "1.024048e+07" ],
[ "3.189656e+06" ],
"virginica"
],
[
[ "1.857571e+03" ],
[ "8.443506e+02" ],
[ "1.350961e+03" ],
[ "4.390623e+02" ],
"versicolor"
]
],
"aoColumns": [
{
"sTitle": "Sepal.Length",
"sType": "scientific"
},
{
"sTitle": "Sepal.Width",
"sType": "scientific"
},
{
"sTitle": "Petal.Length",
"sType": "scientific"
},
{
"sTitle": "Petal.Width",
"sType": "scientific"
},
{
"sTitle": "Species"
}
]
},
"id": "chart5045cbf79c9"
}
$('#' + chartParamschart5045cbf79c9.id).removeClass("rChart")
$(document).ready(function() {
drawDataTable(chartParamschart5045cbf79c9)
});
function drawDataTable(chartParams){
var dTable = $('#' + chartParams.dom).dataTable(
chartParams.table
);
//first use rCharts width
$('#'+chartParams.id+"_wrapper").css("width",chartParams.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>
<script></script>
</body>
</html>iris_sc <- iris
#randomly make these numbers exponentially large to be able to visually verify result
iris_sc[,-5] <- format(iris_sc[,-5]*10^runif(nrow(iris),1,10),scientific=T)
dt <- dTable(
iris_sc[sample(1:nrow(iris_sc),50),]
)
#add the scientific sort from http://next.datatables.net/plug-ins/sorting/scientific
#easier to add in script than to add to jshead
dt$setTemplate(chartDiv = sprintf('%s
<script>
%s
</script>
',
dt$templates$chartDiv,
'jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"scientific-pre": function ( a ) {
return parseFloat(a);
},
"scientific-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"scientific-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
'
))
#hack with lapply; I think there is a better way to do
#but this sets type to scientific for all columns
#except the last which is species
dt$params$table$aoColumns[-ncol(iris_sc)] <- lapply(
dt$params$table$aoColumns[-ncol(iris_sc)],
function(x){
x$sType = "scientific"
return(x)
}
)
dt