Template:Flot ffcp hg19: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<h2>CAGE Peaks | <h2>CAGE Peaks</h2> | ||
<div id="charthg19" style=" | <div id="charthg19" style="height:300px; width=100%;"></div><br> | ||
Sample of clicked point: <span id="samplehg19"></span> | Sample of clicked point: <span id="samplehg19"></span> | ||
Line 20: | Line 20: | ||
$.plot($("#charthg19"), [dataset], { | $.plot($("#charthg19"), [dataset], { | ||
yaxis: { min: 0 }, | yaxis: { min: 0, axisLabel: 'TPM' }, | ||
xaxis: { tickDecimals: 0, show: false }, | xaxis: { tickDecimals: 0, show: false }, | ||
grid: { hoverable: true, clickable: true }, | grid: { hoverable: true, clickable: true }, | ||
}); | }); | ||
function showTooltip(x, y, contents) { | |||
$('<div id="tooltip">' + contents + '</div>').css( { | |||
position: 'absolute', | |||
display: 'none', | |||
top: y + 5, | |||
left: x + 5, | |||
border: '1px solid #fdd', | |||
padding: '2px', | |||
'background-color': '#fee', | |||
opacity: 0.80 | |||
}).appendTo("body").fadeIn(200); | |||
} | |||
var previousPoint = null; | |||
$("#charthg19").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, | |||
"Cage Peak: "+item.series.label+"<br>Sample: "+series[x]+"<br>Phase1_expression: "+y); | |||
} | |||
} | |||
else { | |||
$("#tooltip").remove(); | |||
previousPoint = null; | |||
} | |||
}); | |||
$("#charthg19").bind("plotclick", function (event, pos, item) { | |||
if (item) { | |||
$smpl = series[item.datapoint[0].toFixed(0)]; | |||
$("#samplehg19").html('<a href="/resource_browser/index.php/FF:' + $smpl.split(".").pop() + '">' + $smpl +'</a>'); | |||
} | |||
}); | |||
}); | |||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 18:55, 2 April 2012
CAGE Peaks
Sample of clicked point: