Personal tools

Difference between revisions of "User:Hisa/custom list test"

From FANTOM5_SSTAR

Jump to: navigation, search
Line 1: Line 1:
 
<html>
 
<html>
<style type="text/css" title="currentStyle">
+
<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>
 +
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/highlight/jquery.highlight-3.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/media/css/jquery.dataTables.css";
.rotate90 {
+
@import "/resource_browser/rb_js/datatables/extras/TableTools/media/css/TableTools.css";
  -webkit-transform: rotate(-90deg);
+
.highlight { background-color: yellow }
  -moz-transform: rotate(-90deg); 
 
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 
overflow: hidden;
 
}
 
.rotate90container {
 
margin-left: 3px;
 
 
 
}
 
</style>
 
<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/flot/jquery.flot.min.js"></script>
 
<script type="text/javascript" charset="utf-8">
 
/* Data set - can contain whatever information you want */
 
var aDataSet = [
 
['sample2','2.509','10.233','4'],
 
['sample1','0.23','5.32','5'],
 
['sample3','3.234','16','5.5'],
 
['sample4','1.236','4.542','6'],
 
['sample5','7.9967','8.67','7']
 
];  
 
 
/*
 
    // produce colors as needed
 
            var colors = [], variation = 0;
 
            i = 0;
 
                var c;
 
                if (options.colors.length == i) // check degenerate case
 
                    c = $.color.make(100, 100, 100);
 
                else
 
                    c = $.color.parse(options.colors[i]);
 
  
                // vary color if needed
+
</style>
                var sign = variation % 2 == 1 ? -1 : 1;
+
<script type="text/javascript">
                c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2)
 
  
                // FIXME: if we're getting to close to something else,
 
                // we should probably skip this one
 
                colors.push(c);
 
               
 
                ++i;
 
                if (i >= options.colors.length) {
 
                    i = 0;
 
                    ++variation;
 
                }
 
            */
 
           
 
 
$(document).ready(function() {
 
$(document).ready(function() {
$('#dynamic').html( "<table cellpadding=0 cellspacing=0 border=0 class='display' id='example'></table>" );
+
    var oTable =  $('.ffcp_explist').dataTable({
var otable = $('#example').dataTable( {
+
"sScrollY": "300px",
"aaData": aDataSet,
+
"bScrollCollapse": true,
 +
"iDisplayLength": -1,
 +
"aLengthMenu": [[10, 25, 100, -1], [10, 25, 100, "All"]],
 +
"aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ "_all" ] } ],
 +
"aaSorting": [[ 1, "desc" ]]
 +
});
  
"aoColumns": [
+
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"} ]});
{ "sTitle": "samples" },
 
{ "sTitle": "gene1" },
 
{ "sTitle": "gene2" },
 
{ "sTitle": "gene3" },
 
]
 
} );
 
  
function drawchart(){
+
$('#export_tool').before( oTableTools.dom.container );
var v2 = $("#dynamic tr")[3].cells[1];
 
  
/* collect sample */
+
function drawchart(){
var sname = [];
 
for (var i1=1; i1<$('#dynamic tr').length; i1++) {
 
sname.push([$("#dynamic tr")[i1].cells[0].innerHTML]);
 
}
 
  
 
/* collect data */
 
/* collect data */
 
var data = [];
 
var data = [];
for (var i2=1; i2<$("#dynamic tr")[0].cells.length; i2++){
+
for (var i2=1; i2<$("#explist tr")[0].cells.length; i2++){
var plots = [];
+
var plots = [];
for (var i1=1; i1<$('#dynamic tr').length; i1++) {
+
for (var i1=1; i1<$('#explist tr').length; i1++) {
plots.push([i1,$("#dynamic tr")[i1].cells[i2].innerHTML]);
+
    plots.push([i1,$("#explist tr")[i1].cells[i2].innerHTML]);
}
+
}
data.push({"label": $("#dynamic tr")[0].cells[i2].innerHTML, "data": plots});
+
data.push({"label": $('.dataTables_scrollHeadInner tr')[0].cells[i2].innerText, "data": plots});
 
}
 
}
  
var options = {
 
lines : {
 
show : true
 
},
 
points : {
 
show : true
 
},
 
xaxis : {
 
tickDecimals : 0,
 
tickSize : 1
 
}
 
};
 
  
$('#testv01').text("data: "+sname[1]);
 
  
var placeholder = $("#placeholder");
+
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(); } );
  
$.plot(placeholder, data, options);
+
//$("#test").text($("#explist tr")[0].cells[0].innerHTML);
  
}
+
// 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);
 +
    }
  
drawchart();
+
    var previousPoint = null;
$("th").click(function() {
+
    $("#placeholder").bind("plothover", function (event, pos, item) {
drawchart();
+
        $("#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) {
 +
//$('#dynamic').removeHighlight();
 +
//$('#dynamic td').highlight($("#dynamic tr")[pos.x.toFixed(0)].cells[0].innerText);
 +
//$('#dynamic').highlight($("#dynamic tr")[item.dataIndex].cells[0].innerText);
 +
//}
 +
//    });
 +
// clicking point function end
  
</script>
 
  
  
<div id="dynamic"></div>
+
} );
<div class="spacer"></div>
+
</script>
<div id="testv01"></div>
 
<h1>Flot Examples</h1>
 
<div id="placeholder" style="width:100%;height:300px;"></div>
 
 
</html>
 
</html>
  
<html>
+
<span id="export_tool"></span>
<table class="entrezene_explist" id="dynamic"><thead>
+
 
 +
<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>
 +
 
 +
<!--
 +
<table class="entrezene_explist" id="dynamic"><html><thead></html>
 
<tr>
 
<tr>
 
<th>sample</th>
 
<th>sample</th>
<th height="50"><div class="rotate90container"><div  class="rotate90">
+
<th><div  class="rotate90"><p>
<input type="checkbox" checked><a href="/resource_browser/index.php/FFCP_PHASE1:Hg19::chr8:18248756..18248767,%2B" title="FFCP PHASE1:Hg19::chr8:18248756..18248767,+">p2@NAT2</a></div></div></th><th><input type="checkbox" checked><a href="/resource_browser/index.php/FFCP_PHASE1:Hg19::chr8:18248786..18248805,%2B" title="FFCP PHASE1:Hg19::chr8:18248786..18248805,+">p1@NAT2</a>
+
{{#ask:[[Category:FFCP]][[EntrezGene::10]][[Species::Human (Homo sapiens)]]|?id|?short_description|limit=100|format=template|template=Entrezgene_cpphase1_exptable_header_hg19|sep=</p></div></th><th><div  class="rotate90"><p>}}
</th>
+
</p></div></th>
</tr></thead><tbody>
+
</tr><html></thead><tbody></html>
<tr><td><a href="/resource_browser/index.php/FF:11376-118A8" title="FF:11376-118A8">tpm.Adipocyte - breast, donor1.CNhs11051.11376-118A8</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td></tr><tr><td><a href="/resource_browser/index.php/FF:11327-117E4" title="FF:11327-117E4">tpm.Adipocyte - breast, donor2.CNhs11969.11327-117E4</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,4,0);color: white">0.21</td></tr><tr><td><a href="/resource_browser/index.php/FF:11473-119C6" title="FF:11473-119C6">tpm.Adipocyte - omental, donor1.CNhs11054.11473-119C6</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,2,0);color: white">0.14</td></tr><tr><td><a href="/resource_browser/index.php/FF:11474-119C7" title="FF:11474-119C7">tpm.Adipocyte - omental, donor2.CNhs12067.11474-119C7</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td></tr><tr><td><a href="/resource_browser/index.php/FF:11475-119C8" title="FF:11475-119C8">tpm.Adipocyte - omental, donor3.CNhs12068.11475-119C8</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td></tr><tr><td><a href="/resource_browser/index.php/FF:11476-119C9" title="FF:11476-119C9">tpm.Adipocyte - perirenal, donor1.CNhs12069.11476-119C9</a></td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td><td style="text-align: center; background-color: rgb(0,0,0);color: white">0.00</td></tr>
+
{{#exptable_hg19:
</tbody>
+
{{#ask:[[Category:FFCP]][[EntrezGene::10]][[Species::Human (Homo sapiens)]]
</table>
+
|?Phase1 expression
 +
|limit=100
 +
|format=list
 +
|headers=hide
 +
|sep=;;
 +
|template=Ask1stprop
 +
}}
 +
}}
 +
<html></tbody></html></table>
 +
-->
 +
 
 +
<br><br>
 +
<html>
 +
<div id="placeholder" style="width:100%;height:300px;"></div>
 +
<div id="test">abcdefg</div>
 
</html>
 
</html>

Revision as of 07:33, 24 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




abcdefg