User:Hisa/custom list test: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css" title="currentStyle"> | |||
@import "/resource_browser/rb_js/datatables/media/css/ | @import "/resource_browser/rb_js/datatables/media/css/jquery.dataTables.css"; | ||
</style> | |||
<link href="flot/examples/layout.css" rel="stylesheet" type="text/css"> | |||
<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]); | |||
// vary color if needed | |||
var sign = variation % 2 == 1 ? -1 : 1; | |||
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() { | |||
$('#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": " | { "sTitle": "samples" }, | ||
" | { "sTitle": "gene1" }, | ||
var | { "sTitle": "gene2" }, | ||
{ "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 | |||
}, | }, | ||
{ | points : { | ||
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> | |||
<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