Template:FFCP: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
|||
Line 39: | Line 39: | ||
== CAGE Expression == | == CAGE Expression == | ||
< | <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"> | ||
@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> | ||
{{# | <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" ] } ], | |||
"aaSorting": [[ 1, "desc" ]] | |||
}); | |||
< | |||
<table class=" | 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]); | |||
} | |||
data.push({"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); | |||
showTooltip(item.pageX, item.pageY, | |||
"Sample: "+$("#explist tr")[x].cells[0].innerText+"<br>TPM: "+y); | |||
} | |||
} | |||
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 | |||
} ); | |||
</script> | |||
</html> | |||
<span id="export_tool"></span> | |||
<table class="ffcp_explist" id="explist"><html><thead></html> | |||
<tr> | <tr> | ||
<th scope="col">sample</th> | <th scope="col">sample</th> | ||
<th scope="col">TPM value</th> | <th scope="col">TPM value</th> | ||
</tr> | </tr><html></thead><tbody></html> | ||
{{# | {{#if:{{#pos:{{FULLPAGENAME}}|Hg19}} | ||
{{{phase1_expression}}} | |{{#exptable_hg19:{{{phase1_expression}}}}} | ||
}} | }} | ||
< | <html></tbody></html></table> | ||
</ | <br><br> | ||
< | |||
< | |||
<html> | <html> | ||
< | <div id="placeholder" style="width:100%;height:300px;"></div> | ||
</html> | </html> | ||
Revision as of 15:05, 25 July 2012
short description: | |
---|---|
EntrezGene: | [[EntrezGene%3A{{{EntrezGene}}}|{{{EntrezGene}}}]] |
description: | |
Species: | |
association with transcript: | |
HGNC: | |
UniProt: |
View on UCSC genome browser OSC local mirror
Mouse over to see Genome browser image, Click image to go to Genome browser
{{#ucsc_link:Template:FFCP|https://fantom5-collaboration.gsc.riken.jp/ucsc/}}
CAGE Expression
sample | TPM value |
---|