Personal tools

Template:Flot ffcp hg19: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<h2>CAGE Peaks (hg19)</h2>
<h2>CAGE Peaks</h2>


     <div id="charthg19" style="width:600px;height:300px;"></div><br>
     <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: