|
|
| Line 1: |
Line 1: |
| == TSS expression ==
| | {{#ask:[[category:FF_samples]]}} |
| <html>
| |
| <script type="text/javascript" language="javascript" src="/resource_browser/rb_js/datatables/media/js/jquery.dataTables.min.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>
| |
| <script type="text/javascript" language="javascript" src="/resource_browser/rb_js/jquery.blockUI.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";
| |
| </style>
| |
| | |
| </html>
| |
| | |
| <html>
| |
| <style type="text/css">
| |
| .rotate90 {
| |
| -webkit-transform: rotate(-90deg);
| |
| -moz-transform: rotate(-90deg);
| |
| -webkit-transform-origin: 6px 18px;
| |
| -moz-transform-origin: 6px 18px;
| |
| width:1px;
| |
| }
| |
| .highlight { background-color: yellow }
| |
| </style>
| |
| <script type="text/javascript">
| |
| $(document).ready(function() {
| |
| | |
| var oTable = $('#gene_exptable').dataTable({
| |
| "sScrollY": "300px",
| |
| "bPaginate": false,
| |
| "bScrollCollapse": true,
| |
| "iDisplayLength": -1,
| |
| "aaSorting": [[1,'desc']],
| |
| "aoColumnDefs": [{ "asSorting": [ "asc", "desc" ], "sType": "html", "aTargets": [ 0 ] }, { "asSorting": [ "desc", "asc" ], "aTargets": [ "_all" ] } ]
| |
| });
| |
| $('#gene_exptable_wrapper .dataTables_scrollHead th').css("height", "100px").css("vertical-align", "bottom");
| |
| | |
| | |
| var data = [];
| |
| var plotdata = [];
| |
| | |
| | |
| // chart checkbox
| |
| for (var i2=1; i2<oTable.fnSettings().aoColumns.length; i2++){
| |
| key2 = i2-1;
| |
| $("#gene_exptable_chart_chkbox").append('<input type="checkbox" name="' + key2 +
| |
| '" checked="checked" id="id' + key2 + '"><label for="id' + key2 + '">'
| |
| + $(oTable.fnSettings().aoColumns[i2].sTitle).text() + '</label><br/>');
| |
| }
| |
| | |
| function collectdata(){
| |
| data = [];
| |
| for (i2=1, len2=oTable.fnSettings().aoColumns.length; i2<len2; i2++){
| |
| var plots = [];
| |
| for (i1=2, len1=$('#gene_exptable tr').length; i1<len1; i1++) {
| |
| plots.push([i1,$("#gene_exptable tr")[i1].cells[i2].innerHTML]);
| |
| }
| |
| data.push({"label": $(oTable.fnSettings().aoColumns[i2].sTitle).text(), "data": plots});
| |
| }
| |
| }
| |
| | |
| | |
| function drawchart(){
| |
| | |
| plotdata = [];
| |
| | |
| $("#gene_exptable_chart_chkbox").find("input:checked").each(function () {
| |
| var key = $(this).attr("name");
| |
| plotdata.push(data[$(this).attr("name")]);
| |
| });
| |
| | |
| var plot1 = $.plot($("#gene_exptable_chart"), plotdata, {
| |
| yaxis : { axisLabel : 'TPM' },
| |
| lines : { show : false },
| |
| points : { show : true },
| |
| grid: { hoverable: true, clickable: true },
| |
| xaxis : { tickDecimals : 0, show: false },
| |
| legend: { show: false }
| |
| });
| |
| | |
| | |
| var data_series = plot1.getData();
| |
| | |
| $("#gene_exptable_chart_chkbox label").css("background-color", "white");
| |
| $.each(data_series , function(){
| |
| $("#gene_exptable_chart_chkbox label:contains(" + this.label + ")").css("background-color", this.color);
| |
| });
| |
| | |
| }
| |
| | |
| $.blockUI();
| |
| collectdata();
| |
| drawchart();
| |
| $.unblockUI();
| |
| | |
| // re-draw chart event
| |
| $(window).resize(function() { drawchart(); });
| |
| $("th").click(function() {collectdata(); drawchart(); } );
| |
| //$("#gene_exptable_paginate").click(function() {collectdata(); drawchart(); } );
| |
| $('#gene_exptable').bind('filter', function() {
| |
| setTimeout(function(){
| |
| collectdata(); drawchart();}, 1000);
| |
| } );
| |
| //$('#gene_exptable_length').change(function() {collectdata(); drawchart(); } );
| |
| $("#gene_exptable_chart_chkbox").find("input").click(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;
| |
| $("#gene_exptable_chart").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();
| |
| x = item.datapoint[0].toFixed(0),
| |
| y = item.datapoint[1].toFixed(2);
| |
|
| |
| showTooltip(item.pageX, item.pageY,
| |
| "TSS: "+ item.series.label +"<br>TPM: "+y);
| |
| }
| |
| }
| |
| else {
| |
| $("#tooltip").remove();
| |
| previousPoint = null;
| |
| }
| |
| });
| |
| // tooltip function end
| |
| | |
| // clicking point function
| |
| $("#gene_exptable_chart").bind("plotclick", function (event, pos, item) {
| |
| if (item){
| |
| var vdata = Math.round($('#gene_exptable').height())/item.series.data.length*item.dataIndex;
| |
| $('#gene_exptable_wrapper .dataTables_scrollBody').animate({ scrollTop: vdata-150 }, 'slow');
| |
| $("#gene_exptable_wrapper .dataTables_scrollBody tbody td").removeClass('highlight');
| |
| $('#gene_exptable_wrapper .dataTables_scrollBody tbody tr:eq(' + item.dataIndex+ ') td').addClass('highlight');
| |
| }
| |
| });
| |
| // clicking point function end
| |
| | |
| | |
| | |
| | |
| | |
| } );
| |
| </script>
| |
| </html>
| |
| | |
| {{#gene_exptable:{{#switch:9606|9606=Hg19|10090=Mm9}}
| |
| |{{#ask:[[Category:FFCP]][[Short description::p1@B4GALT1]]|mainlabel=-|?phase1_expression|link=none|format=list|headers=hide|limit=1|intro=p1@B4GALT1,|searchlabel=}}|{{#ask:[[Category:FFCP]][[Short description::p2@B4GALT1]]|mainlabel=-|?phase1_expression|link=none|format=list|headers=hide|limit=1|intro=p2@B4GALT1,|searchlabel=}}|{{#ask:[[Category:FFCP]][[Short description::p3@B4GALT1]]|mainlabel=-|?phase1_expression|link=none|format=list|headers=hide|limit=1|intro=p3@B4GALT1,|searchlabel=}}|{{#ask:[[Category:FFCP]][[Short description::p4@B4GALT1]]|mainlabel=-|?phase1_expression|link=none|format=list|headers=hide|limit=1|intro=p4@B4GALT1,|searchlabel=}}|{{#ask:[[Category:FFCP]][[Short description::p5@B4GALT1]]|mainlabel=-|?phase1_expression|link=none|format=list|headers=hide|limit=1|intro=p5@B4GALT1},|searchlabel=}}
| |
| }}
| |
| | |
| <div id="gene_exptable_chart" style="float:left;width:600px;height:300px;"></div>
| |
| <br>
| |
| <div id="gene_exptable_chart_chkbox" style="float:left;"></div>
| |
| <div style="clear:both;"></div>
| |
| | |
| | |
| *Click each plot point to find sample in table
| |
