|
|
| (67 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <html>
| | {{#ask:[[:FFCP PHASE1:+]][[species::Human (Homo sapiens)]][[EntrezGene::-]]|format=count}} |
| <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/extras/TableTools/media/css/TableTools.css";
| |
| .highlight { background-color: yellow }
| |
| .dataTables_scrollHeadInner tr {
| |
| vertical-align:bottom;
| |
| align:left;
| |
| height:100px;
| |
| }
| |
| .rotate90 p {
| |
| -webkit-transform: rotate(-90deg);
| |
| -moz-transform: rotate(-90deg);
| |
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
| |
| width:1px
| |
| } | |
| </style>
| |
| <script type="text/javascript">
| |
|
| |
|
| $(document).ready(function() {
| |
| var oTable = $('.entrezene_explist').dataTable({
| |
| "sScrollY": "300px",
| |
| "bScrollCollapse": true,
| |
| "iDisplayLength": -1,
| |
| "aLengthMenu": [[10, 25, 100, -1], [10, 25, 100, "All"]],
| |
| "aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ "_all" ] } ],
| |
| "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"} ]});
| | <html> |
| | | <img src="/resource_browser/seqlogos/known_motifs_201304/known1.png"> |
| $('#export_tool').before( oTableTools.dom.container );
| |
| | |
| var data = [];
| |
| var plotdata = [];
| |
| | |
| | |
| // chart checkbox
| |
| //$("#test").text("");
| |
| for (var i2=1; i2<$("#dynamic tr")[0].cells.length; i2++){
| |
| key2 = i2-1;
| |
| $("#chart_chkbox").append('<br/><input type="checkbox" name="' + key2 +
| |
| '" checked="checked" id="id' + key2 + '"><label for="id' + key2 + '">'
| |
| + oTable.fnSettings().aoColumns[i2].sTitle+ '</label>');
| |
| // + $('.dataTables_scrollHeadInner tr')[0].cells[i2].innerText + '</label>');
| |
| }
| |
| | |
| | |
| | |
| | |
| function collectdata(){
| |
| | |
| data = [];
| |
| for (var i2=1; i2<$("#dynamic tr")[0].cells.length; i2++){
| |
| var plots = [];
| |
| for (var i1=1; i1<$('#dynamic tr').length; i1++) {
| |
| plots.push([i1,$("#dynamic tr")[i1].cells[i2].innerHTML]);
| |
| }
| |
| data.push({"label": $('.dataTables_scrollHeadInner tr')[0].cells[i2].innerText, "data": plots});
| |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| function drawchart(){
| |
| | |
| plotdata = [];
| |
| | |
| $("#chart_chkbox").find("input:checked").each(function () {
| |
| var key = $(this).attr("name");
| |
| plotdata.push(data[$(this).attr("name")]);
| |
| });
| |
| | |
| var plot1 = $.plot($("#placeholder"), plotdata, {
| |
| yaxis : { axisLabel : 'TPM' },
| |
| lines : { show : false },
| |
| points : { show : true },
| |
| grid: { hoverable: true, clickable: true },
| |
| xaxis : { tickDecimals : 0, show: false },
| |
| legend: { show: true, container: $("#legends")}
| |
| });
| |
| | |
| //test
| |
| //var testseries = plot1.getData();
| |
| //$("#test").text(testseries[0].color); | |
| //$('div.rotate90:eq(1)').css("background-color", testseries[0].color);
| |
| //$('.dataTables_scrollHeadInner tr:nth-child(2n)').css("background-color", testseries[0].color);
| |
| //$('.dataTables_scrollHeadInner tr')[0].cells[1].innerText("text");
| |
| | |
| }
| |
| | |
| collectdata();
| |
| drawchart();
| |
| | |
| | |
| | |
| // re-draw chart event
| |
| $("th").click(function() {collectdata(); drawchart(); } );
| |
| $('.entrezene_explist').bind('page', function() { drawchart(); } );
| |
| $('.entrezene_explist').bind('filter', function() { drawchart(); } );
| |
| $('#dynamic_length').change(function() {collectdata(); drawchart(); } );
| |
| $("#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;
| |
| $("#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,
| |
| "Gene: "+item.series.label+"<br>Sample: "+oTable._('tr:eq('+ x +')')[0][0]+"<br>TPM: "+y);
| |
| //test
| |
| //$("#test").css("background-color", item.series.color);
| |
| }
| |
| }
| |
| 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>
| |
| </html> | | </html> |
|
| |
|
| <span id="export_tool"></span>
| | https://f5-webapp3.gsc.riken.jp/resource_browser/seqlogos/known_motifs_201304/known1.png |
| <table class="entrezene_explist" id="dynamic"><html><thead></html>
| |
| <tr>
| |
| <th>sample</th>
| |
| <th><div class="rotate90"><p>
| |
| {{#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>}}
| |
| </p></div></th>
| |
| </tr><html></thead><tbody></html>
| |
| {{#exptable_hg19:
| |
| {{#ask:[[Category:FFCP]][[EntrezGene::10]][[Species::Human (Homo sapiens)]]
| |
| |?Phase1 expression
| |
| |limit=100
| |
| |format=list
| |
| |headers=hide
| |
| |sep=;;
| |
| |template=Ask1stprop
| |
| }}
| |
| }}
| |
| <html></tbody></html></table>
| |
|
| |
|
| <br><br>
| | http://fantom.gsc.riken.jp/5/sstar/seqlogo/novel/11.png |
| <html>
| |
| <div id="placeholder" style="float:left;width:90%;height:300px;"></div>
| |
| <div id="legends" style="float:left;"></div>
| |
| <div style="clear:both;"></div>
| |
| <div id="chart_chkbox"></div>
| |
| </html>
| |
