User:Hisa/custom list test: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
(20 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== | <html> | ||
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/datatables/media/js/jquery.dataTables.js"></script> | |||
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/datatables/extras/TableTools/media/js/TableTools.min.js"></script> | |||
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/flot/jquery.flot.min.js"></script> | |||
<style type="text/css" title="currentStyle"> | <style type="text/css" title="currentStyle"> | ||
@import "/resource_browser/rb_js/datatables/media/css/ | @import "/resource_browser/rb_js/datatables/media/css/jquery.dataTables.css"; | ||
@import "/resource_browser/rb_js/datatables/extras/TableTools/media/css/TableTools.css"; | |||
.highlight { background-color: yellow } | |||
</style> | </style> | ||
<script type="text/javascript"> | |||
$(document).ready(function() { | |||
var oTable = $('.ffcp_explist').dataTable({ | |||
// "bPaginate": false, | |||
"sScrollY": "300px", | |||
"bScrollCollapse": true, | |||
"iDisplayLength": -1, | |||
"aLengthMenu": [[10, 25, 100, -1], [10, 25, 100, "All"]], | |||
"aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ "_all" ] } , { "bSortable": false, "aTargets": [ 0 ] }], | |||
"aaSorting": [[ 1, "desc" ]] | |||
}); | |||
var oTableTools = new TableTools( oTable, {"sSwfPath": "/resource_browser/rb_js/datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf", "aButtons": [ {"sExtends": "copy", "mColumns": "visible"}, {"sExtends": "csv", "mColumns": "visible"}, {"sExtends": "pdf", "mColumns": "visible"} ]}); | |||
$('#export_tool').before( oTableTools.dom.container ); | |||
function drawchart(){ | |||
$( | /* collect data */ | ||
var data = []; | |||
for (var i2=1; i2<$("#explist tr")[0].cells.length; i2++){ | |||
var plots = []; | |||
" | for (var i1=1; i1<$('#explist tr').length; i1++) { | ||
//plots.push([i1,$("#explist tr")[i1].cells[i2].innerHTML]); | |||
plots[plots.length] = [i1,$("#explist tr")[i1].cells[i2].innerHTML]; | |||
} | |||
//data.push({"label": $('.dataTables_scrollHeadInner tr')[0].cells[i2].innerText, "data": plots}); | |||
data[data.length] = {"label": $('.dataTables_scrollHeadInner tr')[0].cells[i2].innerText, "data": plots}; | |||
} | } | ||
] | |||
var plot1 = $.plot($("#placeholder"), data, { | |||
yaxis : { axisLabel : 'TPM' }, | |||
lines : { show : false }, | |||
points : { show : true }, | |||
grid: { hoverable: true, clickable: true }, | |||
xaxis : { tickDecimals : 0, show: false }, | |||
legend: { show: false} | |||
}); | |||
} | |||
drawchart(); | |||
// re-draw chart event | |||
$("th").click(function() { drawchart(); } ); | |||
$('.ffcp_explist').bind('page', function() { drawchart(); } ); | |||
$('.ffcp_explist').bind('filter', function() { drawchart(); } ); | |||
$('#explist_length').change(function() { drawchart(); } ); | |||
// tooltip function start | |||
function showTooltip(x, y, contents) { | |||
$('<div id="tooltip">' + contents + '</div>').css( { | |||
position: 'absolute', | |||
display: 'none', | |||
top: y + 5, | |||
left: x + 5, | |||
border: '1px solid #aaa', | |||
padding: '2px', | |||
'background-color': '#fff', | |||
opacity: 0.80 | |||
}).appendTo("body").fadeIn(200); | |||
} | |||
var previousPoint = null; | |||
$("#placeholder").bind("plothover", function (event, pos, item) { | |||
$("#x").text(pos.x.toFixed(2)); | |||
$("#y").text(pos.y.toFixed(2)); | |||
if (item) { | |||
if (previousPoint != item.dataIndex) { | |||
previousPoint = item.dataIndex; | |||
$("#tooltip").remove(); | |||
var x = item.datapoint[0].toFixed(0), | |||
y = item.datapoint[1].toFixed(2); | |||
//var smplname = $('#explist_wrapper .dataTables_scrollBody tbody tr')[item.dataIndex].cells[0].innerText; | |||
var smplname = oTable._('tr:eq(' + item.dataIndex + ')')[0][0]; | |||
var desc = "TPM: "+y; | |||
if(smplname){ | |||
desc = "Sample: " + smplname + "<br>" + desc; | |||
} | |||
showTooltip(item.pageX, item.pageY, desc); | |||
} | |||
} | |||
else { | |||
$("#tooltip").remove(); | |||
previousPoint = null; | |||
} | |||
}); | |||
// tooltip function end | |||
// clicking point function | |||
$("#placeholder").bind("plotclick", function (event, pos, item) { | |||
if (item){ | |||
var vdata = Math.round($('#explist').height())/item.series.data.length*item.dataIndex; | |||
$('#explist_wrapper .dataTables_scrollBody').animate({ scrollTop: vdata-150 }, 'slow'); | |||
//$('#test').text(vdata); | |||
$("#explist_wrapper .dataTables_scrollBody tbody td").removeClass('highlight'); | |||
$('#explist_wrapper .dataTables_scrollBody tbody tr:eq(' + item.dataIndex+ ') td').addClass('highlight'); | |||
} | |||
}); | |||
// clicking point function end | |||
//test | |||
var t1 = oTable.fnSettings().aoColumns[1]; | |||
$('#test2').text(t1.sTitle); | |||
//$('#test2').text("yes"); | |||
} ); | |||
</script> | |||
</html> | |||
<span id="export_tool"></span> | |||
<table class="ffcp_explist" id="explist"><html><thead></html> | |||
<tr> | |||
<th scope="col">sample</th> | |||
<th scope="col">TPM value</th> | |||
</tr><html></thead><tbody></html> | |||
{{#exptable_hg19: | |||
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0787107813136792,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.344745680736619,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.289803085735052,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.130979075497713,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.17859945656816,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.116193942869518,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.114814448164607,0,0,0.451199612907412,0.308061348417659,0.784349769176855,0,0.633309773357254,0,0,0,0,0,0,1.27438136522519,2.49322802678617,0.895499018888713,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.211107635297664,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.10998064528027,0.326465616318295,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.20990716048664,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.70762395791482,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8.14950798265875,0,0,0,0,0,0,0,0,0,1.02418136999391,0.576911008668165,1.28066733322951,0,0,0,0,0,0,0,0,0,0,0,0.472834243795189,0.786818822024972,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.56630256826494,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.151230923763239,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.53744911152768,0,0,0,0,0,0,0,0,0,0.999936979274649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.781514011233092,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.9555033757741,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.121917924982269,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5290268405154,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 | |||
}} | |||
<html></tbody></html></table> | |||
<br><br> | |||
<html> | |||
<div id="placeholder" style="width:100%;height:300px;"></div> | |||
<div id="test2"></div> | |||
</html> | </html> |
Latest revision as of 12:19, 27 July 2012
{{#exptable_hg19: 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0787107813136792,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.344745680736619,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.289803085735052,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.130979075497713,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.17859945656816,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.116193942869518,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.114814448164607,0,0,0.451199612907412,0.308061348417659,0.784349769176855,0,0.633309773357254,0,0,0,0,0,0,1.27438136522519,2.49322802678617,0.895499018888713,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.211107635297664,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.10998064528027,0.326465616318295,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.20990716048664,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.70762395791482,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8.14950798265875,0,0,0,0,0,0,0,0,0,1.02418136999391,0.576911008668165,1.28066733322951,0,0,0,0,0,0,0,0,0,0,0,0.472834243795189,0.786818822024972,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.56630256826494,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.151230923763239,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.53744911152768,0,0,0,0,0,0,0,0,0,0.999936979274649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.781514011233092,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.9555033757741,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.121917924982269,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5290268405154,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 }}
sample | TPM value |
---|