2 * for graphical presentation of GEBVs of a trait.
3 * With capability for zooming in for selected area.
4 * Double clicking zooms in by 50%.
5 * @author Isaak Y Tecle <iyt2@cornell.edu>
10 jQuery(document).ready( function() {
14 function plotGebvScatter() {
16 var popId = jQuery('#model_id').val();
17 var traitId = jQuery('#trait_id').val();
18 var comboPopsId = jQuery('#combo_pops_id').val();
19 var popsList = jQuery('#pops_list').val();
20 var selectionPopId = jQuery('#selection_pop_id').val();
24 if(popId && !selectionPopId) {
25 params = 'pop_id=' + popId + '&trait_id=' + traitId;
26 } else if (comboPopsId) {
27 params = 'combo_pops_id=' + comboPopsId + '&trait_id=' + traitId + '&selection_pop_id=' + selectionPopId;
28 } else if (selectionPopId) {
29 params = 'pop_id=' + popId + '&trait_id=' + traitId + '&selection_pop_id=' + selectionPopId;
32 var action = '/solgs/trait/gebv/graph';
36 var xAxisTickValues = [];
37 var yAxisTickValues = [];
40 var gebvDataRenderer = function() {
46 success: function(data) {
47 var gebvData = data.gebv_data;
48 var state = data.status;
50 if (state == 'success') {
51 for (var i=0; i < gebvData.length; i++) {
52 var xD = gebvData[i][0];
54 var yD = gebvData[i][1];
55 yD = yD.replace(/\s/, '');
58 xAxisTickValues.push([i, xD]);
59 yAxisTickValues.push([i, yD]);
62 graphArray[0][i] = [];
63 graphArray[0][i][0] = xD;
64 graphArray[0][i][1] = yD;
71 return {'bothAxisValues' : graphArray,
72 'xAxisValues' : xAxisTickValues,
73 'yAxisValues' : yAxisTickValues,
79 var allData = gebvDataRenderer();
81 var xAxisValues = allData.xAxisValues;
82 var yAxisValues = allData.yAxisValues;
83 var yValues = allData.yValues;
84 var minY = Math.min.apply(Math, yValues);
85 var maxY = Math.max.apply(Math, yValues);
86 var minYLabel = minY - (0.2*minY);
87 var maxYLabel = maxY + (0.2*maxY);
88 var plotData = allData.bothAxisValues;
90 if (plotData == 'undefined') {
91 var message = 'There is no GEBV data to plot. Please report this problem';
92 jQuery('#gebvPlot2').append(message).show();
115 tickColor: '#ffffff',
118 axisLabelPadding: 20,
140 var plot = jQuery.plot('#gebvPlot2', plotData, options);
142 var overview = jQuery.plot(jQuery("#gebvPlotOverview"), plotData, {
158 colors: ["#cc0000", "#0066CC"],
161 jQuery("#gebvPlot2").bind("plotselected", function (event, ranges) {
163 plot = jQuery.plot(jQuery("#gebvPlot2"), plotData,
164 jQuery.extend(true, {}, options, {
165 xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
166 yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },
169 plot.setSelection(ranges, true);
170 overview.setSelection(ranges, true);
173 //highlight selected area on the overview plot
174 jQuery("#gebvPlotOverview").bind("plotselected", function (event, ranges) {
175 plot.setSelection(ranges);
178 //reset zooming. Need to figure out zooming out
179 jQuery("#gebvzoom-reset").click(function (e) {
180 // var plot = jQuery.plot("#gebvPlot2", plotData, options);
185 //given datapoint position and content, displays a styled tooltip
186 var showTooltip = function(lt, tp, content) {
187 jQuery('<div id="tooltip">' + content + '</div>').css({
188 position: 'absolute',
190 'font-weight': 'bold',
193 border: '1px solid #ffaf55',
195 }).appendTo("body").show();
198 var zoomHelp = function (lt, tp) {
200 var help_txt = '<div style="width:140px;height:90px">' +
201 'To zoom in, select an area ' +
202 'on the plot and release or double click at any ' +
203 'point on the plot.' +
206 jQuery('<div id="tooltip_zoom">' + help_txt + '</div>').css({
207 position: 'absolute',
209 'font-weight': 'bold',
212 border: '1px solid #C9BE62',
214 }).appendTo("body").show();
217 //calls the tooltip display function and binds the 'plotover' event to
219 var previousPoint = null;
220 var useTooltip = jQuery("#gebvPlot2").bind("plothover", function (event, pos, item) {
222 if (previousPoint != item.dataIndex) {
223 previousPoint = item.dataIndex;
225 jQuery("#tooltip").remove();
226 jQuery("#tooltip_zoom").remove();
228 var x = item.datapoint[0];
229 var y = item.datapoint[1].toFixed(2);
230 var content = xAxisTickValues[x][1] + ', ' + y;
232 showTooltip(item.pageX, item.pageY, content);
233 zoomHelp(item.pageX, item.pageY);
237 jQuery("#tooltip").remove();
238 jQuery("#tooltip_zoom").remove();
239 previousPoint = null;
244 //inverse plot: plots genotypes from high to low gebv values or vice versa
245 var inverseOptions = {
266 tickColor: '#ffffff',
267 axisLabel: 'Genotypes',
269 axisLabelPadding: 20,
271 transform: function (v) { return -v; },
272 inverseTransform: function (v) { return -v; }
278 axisLabel: 'Trait GEBVs',
292 function normalPlot() {
293 jQuery.plot('#gebvPlot2', plotData, options);
296 function inversePlot() {
297 jQuery.plot('#gebvPlot2', plotData, inverseOptions);
300 jQuery("#inverse_gebv_plot").alternateFunctions(normalPlot, inversePlot);