Personal tools

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

From FANTOM5_SSTAR

Jump to: navigation, search
(Created page with "<html> <style type="text/css" title="currentStyle"> @import "/resource_browser/rb_js/datatables/media/css/f5_rb_table.css"; </style> <script type="text/javascript" langua...")
 
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<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/f5_rb_table.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" language="javascript" src="/resource_browser/rb_js/datatables/media/js/jquery.dataTables.js"></script>
+
<script type="text/javascript">
<script type="text/javascript" charset="utf-8">
+
 
 +
$(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"} ]});
  
var aDataSet =
+
$('#export_tool').before( oTableTools.dom.container );
[
 
</html>
 
{{#ask:[[Category:FF_Samples]][[name::~*fibroblast*]]|?id|?Name|?Sample_species|format=template|template=Datatable_sampledata|sep=,|limit=5000}}
 
<html>
 
];
 
  
$(document).ready(function() {
+
function drawchart(){
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
+
 
$('#example').dataTable( {
+
/* collect data */
"iDisplayLength": 25,
+
var data = [];
"aLengthMenu": [[25, 100, 500, -1], [25, 100, 500, "All"]],
+
for (var i2=1; i2<$("#explist tr")[0].cells.length; i2++){
"aaData": aDataSet,
+
var plots = [];
"aoColumns": [
+
for (var i1=1; i1<$('#explist tr').length; i1++) {
{ "sTitle": "FF sample ID",
+
    //plots.push([i1,$("#explist tr")[i1].cells[i2].innerHTML]);
"fnRender": function(obj) {
+
    plots[plots.length] = [i1,$("#explist tr")[i1].cells[i2].innerHTML];
var id = obj.aData[ obj.iDataColumn ];
+
}
return sReturn = "<a href=\"/resource_browser/"+id+"\">"+id+"</a>";
+
//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};
 
}
 
}
},
 
{ "sTitle": "Name","sWidth": "60%"},
 
{ "sTitle": "Species"},
 
  
]
+
 
} );
+
 
} );
+
var plot1 = $.plot($("#placeholder"), data, {
</script>
+
                yaxis : { axisLabel : 'TPM' },
<div id="dynamic"></div>
+
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 03: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