Personal tools

User:Hisa/custom list test: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
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 15:59, 19 July 2012

Flot Examples