Personal tools

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

From FANTOM5_SSTAR

Jump to: navigation, search
Line 1: Line 1:
== fibroblast samples ==
 
 
 
<html>
 
<html>
<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";
</style>
+
</style>
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/datatables/media/js/jquery.dataTables.js"></script>
+
<link href="flot/examples/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" charset="utf-8">
+
<script type="text/javascript" language="javascript" src="/resource_browser/rb_js/datatables/media/js/jquery.dataTables.min.js"></script>
 +
<script language="javascript" type="text/javascript" src="/resource_browser/rb_js/datatables/media/js/flot/jquery.min.flot.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]);
  
var aDataSet =
+
                // vary color if needed
[
+
                var sign = variation % 2 == 1 ? -1 : 1;
</html>
+
                c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2)
{{#ask:[[Category:FF_Samples]][[name::~*fibroblast*]]|?id|?Name|?Sample_species|format=template|template=Datatable_sampledata|sep=,|limit=5000}}
 
<html>
 
];
 
  
$(document).ready(function() {
+
                // FIXME: if we're getting to close to something else,
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
+
                // we should probably skip this one
$('#example').dataTable( {
+
                colors.push(c);
"iDisplayLength": 25,
+
               
"aLengthMenu": [[25, 100, 500, -1], [25, 100, 500, "All"]],
+
                ++i;
 +
                if (i >= options.colors.length) {
 +
                    i = 0;
 +
                    ++variation;
 +
                }
 +
            */
 +
           
 +
$(document).ready(function() {
 +
$('#dynamic').html( "<table cellpadding=0 cellspacing=0 border=0 class='display' id='example'></table>" );
 +
var otable = $('#example').dataTable( {
 
"aaData": aDataSet,
 
"aaData": aDataSet,
 +
 
"aoColumns": [
 
"aoColumns": [
{ "sTitle": "FF sample ID",
+
{ "sTitle": "samples" },
"fnRender": function(obj) {
+
{ "sTitle": "gene1" },
var id = obj.aData[ obj.iDataColumn ];
+
{ "sTitle": "gene2" },
return sReturn = "<a href=\"/resource_browser/"+id+"\">"+id+"</a>";
+
{ "sTitle": "gene3" },
 +
]
 +
} );
 +
 
 +
function drawchart(){
 +
var v2 = $("#dynamic tr")[3].cells[1];
 +
 
 +
/* collect sample */
 +
var sname = [];
 +
for (var i1=1; i1<$('#dynamic tr').length; i1++) {
 +
sname.push([$("#dynamic tr")[i1].cells[0].innerHTML]);
 +
}
 +
 
 +
/* collect data */
 +
var 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": $("#dynamic tr")[0].cells[i2].innerHTML, "data": plots});
 
}
 
}
 +
 +
var options = {
 +
lines : {
 +
show : true
 
},
 
},
{ "sTitle": "Name","sWidth": "60%"},
+
points : {
{ "sTitle": "Species"},
+
show : true
 +
},
 +
xaxis : {
 +
tickDecimals : 0,
 +
tickSize : 1
 +
}
 +
};
 +
 
 +
$('#testv01').text("data: "+sname[1]);
 +
 
 +
var placeholder = $("#placeholder");
 +
 
 +
$.plot(placeholder, data, options);
 +
 
 +
}
 +
 
 +
drawchart();
 +
$("th").click(function() {
 +
drawchart();
  
]
 
 
} );
 
} );
} );
+
});
</script>
+
 
<div id="dynamic"></div>
+
</script>
 +
 
 +
 
 +
<div id="dynamic"></div>
 +
<div class="spacer"></div>
 +
<div id="testv01"></div>
 +
<h1>Flot Examples</h1>
 +
<div id="placeholder" style="width:600px;height:300px;"></div>
 
</html>
 
</html>

Revision as of 06:59, 19 July 2012

Flot Examples