|
42
|
1 /**
|
|
|
2 * jqBarGraph - jQuery plugin
|
|
|
3 * @version: 1.1 (2011/04/03)
|
|
|
4 * @requires jQuery v1.2.2 or later
|
|
|
5 * @author Ivan Lazarevic
|
|
|
6 * Examples and documentation at: http://www.workshop.rs/jqbargraph/
|
|
|
7 *
|
|
|
8 * Dual licensed under the MIT and GPL licenses:
|
|
|
9 * http://www.opensource.org/licenses/mit-license.php
|
|
|
10 * http://www.gnu.org/licenses/gpl.html
|
|
|
11 *
|
|
|
12 * @param data: arrayOfData // array of data for your graph
|
|
|
13 * @param title: false // title of your graph, accept HTML
|
|
|
14 * @param barSpace: 10 // this is default space between bars in pixels
|
|
|
15 * @param width: 400 // default width of your graph ghhjgjhg
|
|
|
16 * @param height: 200 //default height of your graph
|
|
|
17 * @param color: '#000000' // if you don't send colors for your data this will be default bars color
|
|
|
18 * @param colors: false // array of colors that will be used for your bars and legends
|
|
|
19 * @param lbl: '' // if there is no label in your array
|
|
|
20 * @param sort: false // sort your data before displaying graph, you can sort as 'asc' or 'desc'
|
|
|
21 * @param position: 'bottom' // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
|
|
|
22 * @param prefix: '' // text that will be shown before every label
|
|
|
23 * @param postfix: '' // text that will be shown after every label
|
|
|
24 * @param animate: true // if you don't need animated appereance change to false
|
|
|
25 * @param speed: 2 // speed of animation in seconds
|
|
|
26 * @param legendWidth: 100 // width of your legend box
|
|
|
27 * @param legend: false // if you want legend change to true
|
|
|
28 * @param legends: false // array for legend. for simple graph type legend will be extracted from labels if you don't set this
|
|
|
29 * @param type: false // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
|
|
|
30 * @param showValues: true // you can use this for multi and stacked type and it will show values of every bar part
|
|
|
31 * @param showValuesColor: '#fff' // color of font for values
|
|
|
32
|
|
|
33 * @example $('#divForGraph').jqBarGraph({ data: arrayOfData });
|
|
|
34
|
|
|
35 **/
|
|
|
36
|
|
|
37 (function($) {
|
|
|
38 var opts = new Array;
|
|
|
39 var level = new Array;
|
|
|
40
|
|
|
41 $.fn.jqBarGraph = $.fn.jqbargraph = function(options){
|
|
|
42
|
|
|
43 init = function(el){
|
|
|
44
|
|
|
45 opts[el.id] = $.extend({}, $.fn.jqBarGraph.defaults, options);
|
|
|
46 $(el).css({'height': opts[el.id].height, 'position':'relative', 'text-align':'center' });
|
|
|
47
|
|
|
48
|
|
|
49 doGraph(el);
|
|
|
50
|
|
|
51 };
|
|
|
52
|
|
|
53 // sum of array elements
|
|
|
54 sum = function(ar,tab){
|
|
|
55 total = 0;
|
|
|
56 for(var val in ar){
|
|
|
57 total += ar[val][tab];
|
|
|
58 }
|
|
|
59 return total.toFixed(2);
|
|
|
60 };
|
|
|
61
|
|
|
62 // count max value of array
|
|
|
63 max = function(ar,tab){
|
|
|
64 maxvalue = 0;
|
|
|
65 for(var fam in ar){
|
|
|
66 for(var sample in ar[fam]["samples"]){
|
|
|
67
|
|
|
68 value = sum(ar[fam]["samples"][sample],tab);
|
|
|
69 if (parseFloat(value) > parseFloat(maxvalue)) maxvalue=value;
|
|
|
70 }
|
|
|
71 }
|
|
|
72 return maxvalue;
|
|
|
73 };
|
|
|
74
|
|
|
75
|
|
|
76 doGraph = function(el){
|
|
12
|
77
|
|
42
|
78 arr = opts[el.id];
|
|
|
79 data = arr.data;
|
|
|
80 data_keys=Object.keys(data);
|
|
|
81 color_map=arr.colors;
|
|
|
82
|
|
|
83 n_bars=0;
|
|
|
84
|
|
|
85 for(fam in data){
|
|
|
86 for(sample in data[fam]){
|
|
|
87 n_bars+=1;
|
|
|
88 }
|
|
12
|
89 }
|
|
42
|
90
|
|
|
91
|
|
|
92 //check if array is bad or empty
|
|
|
93 if(data == undefined) {
|
|
|
94 $(el).html('There is not enought data for graph');
|
|
|
95 return;
|
|
12
|
96 }
|
|
42
|
97 //sorting ascending or descending
|
|
12
|
98
|
|
42
|
99 if(arr.sort == 'asc'){
|
|
|
100 data_keys=sortGraph(arr,sortAsc);
|
|
12
|
101 }
|
|
42
|
102 if(arr.sort == 'desc'){
|
|
|
103 data_keys=sortGraph(arr,sortDesc);
|
|
12
|
104 }
|
|
42
|
105
|
|
|
106
|
|
|
107 max1 = max(data,arr.tab);
|
|
|
108
|
|
|
109 m = Math.max(max(data,'reads'),max(data,'bp'));
|
|
|
110
|
|
|
111 w = (m+"").length * 10;
|
|
|
112 legend = '';
|
|
|
113 prefix = arr.prefix;
|
|
|
114 postfix = arr.postfix;
|
|
|
115 space = arr.barSpace; //space between bars
|
|
|
116 legendWidth = arr.legend ? arr.legendWidth : 0; //width of legend box
|
|
|
117 fieldWidth = w //width of bar
|
|
|
118
|
|
|
119 totalHeight = $(el).height(); //total height of graph box
|
|
|
120 var leg = new Array(); //legends array
|
|
|
121
|
|
|
122 //max value in data, I use this to calculate height of bar
|
|
|
123
|
|
|
124
|
|
|
125 var i=0;
|
|
|
126 var fields=0
|
|
|
127 for(var key in data_keys){
|
|
|
128 space=arr.barSpace;
|
|
|
129 fam = data_keys[key];
|
|
|
130
|
|
|
131 for(var sample in data[fam]["samples"]){
|
|
|
132
|
|
|
133 valueData = data[fam]["samples"][sample];
|
|
|
134 value = sum(valueData,arr.tab);
|
|
|
135 sample_keys=Object.keys(valueData);
|
|
|
136
|
|
|
137 lbl = fam
|
|
|
138 unique = fam+sample+el.id; //unique identifier
|
|
|
139 fieldWidth = w+space;
|
|
|
140 fields = fields+w+arr.barSpace;
|
|
|
141
|
|
|
142 if (lbl == undefined) lbl = arr.lbl;
|
|
|
143
|
|
|
144 margin_top=4;
|
|
|
145
|
|
|
146 unique_fam = fam+el.id;
|
|
|
147 out = "<div class='graphField"+el.id+"' id='graphField"+unique+"' style='position: absolute'>";
|
|
|
148
|
|
|
149 out += "<a class='graphLabelLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+fam+"','"+sample+"')><div class='graphValue"+el.id+"' id='graphValue"+unique+"'>"+parseInt(value)+"</div></a>";
|
|
|
150
|
|
|
151 out += "<div class='graphBar"+el.id+"' id='graphFieldBar"+unique+"' style='background-color:#fff;position: relative; overflow: hidden;'></div>";
|
|
|
152 //console.log(color)
|
|
|
153 // if there is no legend or exist legends display lbl at the bottom
|
|
|
154
|
|
|
155 out += "<a class='graphLabelLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+fam+"')><div class='graphLabel"+el.id+"' id='graphLabel"+unique+"'style='margin-top:"+margin_top+"px;'>"+lbl+"</div></a>";
|
|
|
156 out += "</div>";
|
|
|
157
|
|
|
158
|
|
|
159
|
|
|
160 $(el).append(out);
|
|
|
161 $(".graphLabel"+el.id).css({'-webkit-transform': 'rotate(30deg)', '-moz-transform': 'rotate(30deg)','-o-transform': 'rotate(30deg)', '-ms-transform': 'rotate(30deg)','transform': 'rotate(30deg)', 'height':'100'});
|
|
|
162 $('a.graphLabel').css({
|
|
|
163 'text-decoration': 'none',
|
|
|
164 'color':'black'
|
|
|
165 });
|
|
|
166
|
|
|
167 totalHeightBar = totalHeight - $('.graphLabel'+el.id).height() - $('.graphValue'+el.id).height()-margin_top;
|
|
|
168 fieldHeight = (totalHeightBar*value)/max1;
|
|
|
169
|
|
|
170 $('#graphField'+unique).css({
|
|
|
171 'left': (w+arr.barSpace)*i,
|
|
|
172 'width': w,
|
|
|
173 'margin-left': space});
|
|
|
174
|
|
|
175
|
|
|
176 maxe = max1;
|
|
|
177 k=0;
|
|
|
178 for(var r in valueData){
|
|
|
179 k+=1;
|
|
|
180 }
|
|
|
181
|
|
|
182
|
|
|
183 if(arr.sortBar=='asc'){
|
|
|
184 sample_keys=sortBar(valueData,arr.tab, barAsc);
|
|
|
185 }
|
|
|
186 if(arr.sortBar=='desc'){
|
|
|
187 sample_keys=sortBar(valueData,arr.tab, barDesc);
|
|
|
188 }
|
|
|
189
|
|
|
190
|
|
|
191 for(var s_key in sample_keys){
|
|
|
192 region = sample_keys[s_key];
|
|
|
193
|
|
|
194 heig = (totalHeightBar*valueData[region][arr.tab]/maxe);
|
|
|
195
|
|
|
196 if(navigator.userAgent.match('Safari') && !navigator.userAgent.match('Chrom')){
|
|
|
197
|
|
|
198 heig = heig + (arr.borderSize/1.85);
|
|
|
199 }
|
|
|
200
|
|
|
201 wid = parseInt((fieldWidth-space)/k);
|
|
|
202 sv = ''; // show values
|
|
|
203 fs = 0; // font size
|
|
|
204 if (arr.showValues){
|
|
|
205 sv = arr.prefix+valueData[region][arr.tab]+arr.postfix;
|
|
|
206 fs = 12; // font-size is 0 if showValues = false
|
|
|
207 }
|
|
|
208
|
|
|
209 o = "<a class='subBarLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+fam+"','"+sample+"','"+region+"')><div class='subBars"+el.id+"' style=' box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; height:"+heig+"px; border-top:"+arr.borderSize+"px solid; border-color: "+arr.showValuesColor+"; background-color: "+color_map[sample][valueData[region]["state"]]+"; left:"+wid*parseInt(region)+"px; color:"+arr.showValuesColor+"; font-size:"+fs+"px' >"+sv+"</div></a>";
|
|
|
210 $('#graphFieldBar'+unique).prepend(o);
|
|
|
211 }
|
|
|
212
|
|
|
213 //position of bars
|
|
|
214 if(arr.position == 'bottom') $('.graphField'+el.id).css('bottom',0);
|
|
|
215
|
|
|
216
|
|
|
217
|
|
|
218
|
|
|
219
|
|
|
220 // animated apearing
|
|
|
221 if(arr.animate){
|
|
|
222 $('#graphFieldBar'+unique).css({ 'height' : 0 });
|
|
|
223 $('#graphFieldBar'+unique).animate({'height': fieldHeight},arr.speed*1000);
|
|
|
224 } else {
|
|
|
225 $('#graphFieldBar'+unique).css({'height': fieldHeight});
|
|
|
226 }
|
|
|
227 i=i+1;
|
|
|
228 space=0;
|
|
|
229 }
|
|
12
|
230
|
|
42
|
231 }
|
|
|
232 ws = fields + legendWidth + 40;
|
|
|
233 $(el).css({'width': ws})
|
|
|
234 arr.width=ws;
|
|
|
235
|
|
|
236 createLegend(color_map,el.id); // create legend from array
|
|
|
237 createLinks(el.id);
|
|
|
238 //position of legend
|
|
|
239
|
|
|
240 $(el).append("<div id='legendHolder"+el.id+"'></div>");
|
|
|
241 $('#legendHolder'+el.id).css({ 'width': 200, 'float': 'right','text-align' : 'left'});
|
|
|
242 $('#legendHolder'+el.id).append(legend);
|
|
|
243 $('#legendHolder'+el.id).append(links);
|
|
|
244 $('.legendBar'+el.id).css({ 'float':'left', 'margin': 3, 'margin-left':'40','height': 12, 'width': 20, 'font-size': 0});
|
|
|
245 $('.linkBar'+el.id).css({'margin-left':'40'});
|
|
|
246
|
|
|
247
|
|
|
248 $("#sortAsc"+el.id).click(function(){
|
|
|
249 if(opts[el.id].sort!='asc'){
|
|
|
250 opts[el.id].sort='asc';
|
|
|
251 $('#graphHolder'+el.id).html('');
|
|
|
252 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
253 }
|
|
|
254
|
|
|
255 });
|
|
|
256 $("#sortDesc"+el.id).click(function(){
|
|
|
257 if(opts[el.id].sort!='desc'){
|
|
|
258 opts[el.id].sort='desc';
|
|
|
259 $('#graphHolder'+el.id).html('');
|
|
|
260 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
261 }
|
|
|
262
|
|
|
263 });
|
|
|
264 $("#sortBarAsc"+el.id).click(function(){
|
|
|
265 if(opts[el.id].sortBar!='asc'){
|
|
|
266 opts[el.id].sortBar='asc';
|
|
|
267 $('#graphHolder'+el.id).html('');
|
|
|
268 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
269 }
|
|
|
270
|
|
|
271 });
|
|
|
272 $("#sortBarDesc"+el.id).click(function(){
|
|
|
273 if(opts[el.id].sortBar!='desc'){
|
|
|
274 opts[el.id].sortBar='desc';
|
|
|
275 $('#graphHolder'+el.id).html('');
|
|
|
276 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
277 }
|
|
|
278
|
|
|
279 });
|
|
|
280
|
|
|
281 $("#showBasepairs"+el.id).click(function(){
|
|
|
282 opts[el.id].tab='bp';
|
|
|
283 $('#graphHolder'+el.id).html('');
|
|
|
284 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
285
|
|
|
286
|
|
|
287
|
|
|
288 });
|
|
|
289 $("#showReads"+el.id).click(function(){
|
|
|
290 opts[el.id].tab='reads';
|
|
|
291 $('#graphHolder'+el.id).html('');
|
|
|
292 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
293
|
|
|
294
|
|
|
295
|
|
|
296 });
|
|
|
297
|
|
|
298
|
|
|
299
|
|
|
300 //position of title
|
|
|
301 if(arr.title){
|
|
12
|
302 $(el).wrap("<div id='graphHolder"+el.id+"'></div>");
|
|
|
303 if(arr.tab=='reads'){
|
|
42
|
304 $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative reads assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
12
|
305 }else{
|
|
42
|
306 $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative basepairs assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
12
|
307 }
|
|
42
|
308 $('#graphHolder'+el.id).prepend("<a href=#files"+el.id+" onclick=fillDiv('"+el.id+"')>"+arr.title+"</a>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
|
309
|
|
|
310 }
|
|
|
311 $("#graphHolder"+el.id).append("<div class='files"+el.id+"' id='files"+el.id+"' ></div><p/>");
|
|
|
312 $('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
|
|
|
313
|
|
|
314 $("#graphHolder"+el.id).append("<div class='image"+el.id+"' id='image"+el.id+"' ></div>");
|
|
|
315 $('.image'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
|
|
|
316
|
|
|
317 };
|
|
|
318
|
|
|
319
|
|
|
320 //creating legend from array
|
|
|
321 createLegend = function(color_map,id){
|
|
|
322 legend = '';
|
|
|
323 for(var sample in color_map){
|
|
|
324 legend += "<div id='legend"+sample+"' style='overflow: hidden; zoom: 1; margin-left: 20;'><b>"+sample+"</b></div>";
|
|
|
325 for(var state in color_map[sample]){
|
|
|
326 legend += "<div id='legend"+sample+state+"' style='overflow: hidden; zoom: 1;'>";
|
|
|
327 legend += "<div class='legendBar"+id+"' id='legendColor"+sample+state+"' style='background-color:"+color_map[sample][state]+"'></div>";
|
|
|
328 legend += "<div class='legendLabel"+id+"' id='graphLabel"+unique+"'>"+state+"</div>";
|
|
|
329 legend += "</div>";
|
|
|
330 }
|
|
|
331 }
|
|
12
|
332 };
|
|
|
333
|
|
|
334 createLinks = function(id){
|
|
42
|
335 links="<div class='linkBar"+id+"'>";
|
|
|
336 links+="<div ><a href='javascript:void(0);' id='sortAsc"+id+"' >sort ascending</a></div>"
|
|
|
337 links+="<div ><a href='javascript:void(0);' id='sortDesc"+id+"'>sort descending</a></div>"
|
|
|
338 links+="<div ><a href='javascript:void(0);' id='sortBarAsc"+id+"'>sort bars ascending</a></div>"
|
|
|
339 links+="<div ><a href='javascript:void(0);' id='sortBarDesc"+id+"'>sort bars descending</a></div>"
|
|
|
340 if(opts[id].tab=='reads'){
|
|
|
341 links+="<div ><a href='javascript:void(0);' id='showBasepairs"+id+"'>show basepair chart </a></div>"
|
|
|
342 }else{
|
|
|
343 links+="<div ><a href='javascript:void(0);' id='showReads"+id+"'>show read chart </a></div>"
|
|
|
344 }
|
|
|
345 links+="</div>"
|
|
|
346
|
|
|
347
|
|
12
|
348 };
|
|
|
349
|
|
42
|
350 fillDiv = function (elid, family,sample, region) {
|
|
|
351
|
|
|
352
|
|
|
353
|
|
|
354 arr=opts[elid].data;
|
|
|
355
|
|
|
356 generateDownloadLink = function(family,sample,region,filetype){
|
|
|
357 out=" no file ";
|
|
|
358
|
|
|
359 if(arr[family]["samples"][sample][region]["files"][filetype]){
|
|
|
360 out="<a href="+arr[family]["type"]+"_"+family+"/region_"+region+"_"+filetype+">download</a>";
|
|
|
361 }
|
|
|
362 return out;
|
|
|
363
|
|
|
364 };
|
|
|
365 generateShowLink = function(family,sample,region){
|
|
|
366 out=" no image ";
|
|
|
367 if(arr[family]["samples"][sample][region]["files"]["consensus.png"]){
|
|
|
368 out="<a href=#image"+elid+" onclick=showImage('"+elid+"','"+region+"','"+arr[family]["type"]+"_"+family +"/region_"+region+"_consensus.png')>show</a>";
|
|
|
369 }
|
|
|
370 return out;
|
|
|
371
|
|
|
372 };
|
|
|
373 generateLine=function(family,sample,region){
|
|
|
374
|
|
|
375 return "<tr><td>"+family+"</td><td>"+sample+"</td><td>"+region+"</td><td>"+arr[family]["samples"][sample][region]["reads"]+"</td><td>"+arr[family]["samples"][sample][region]["bp"]+"</td><td>"+arr[family]["samples"][sample][region]["length"]+"</td><td>"+generateDownloadLink(family,sample,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(family,sample,region,"alignment.bam")+"</td><td>"+generateDownloadLink(family,sample,region,"consensus.fa")+"</td><td>"+generateShowLink(family,sample,region)+" "+generateDownloadLink(family,sample,region,"consensus.png")+"</td></tr>";
|
|
12
|
376
|
|
42
|
377 };
|
|
|
378
|
|
|
379
|
|
|
380 var div = document.getElementById("files" + elid);
|
|
|
381 div.innerHTML="";
|
|
|
382
|
|
|
383 out = "<div><H3>Files for selected data "+sample+"</H3></div><p/>";
|
|
12
|
384
|
|
42
|
385 out += "<div class='" + elid + "_files' id='" + elid + "_files'><table id='"+elid+"table' class='"+elid+"table' border=1 cellpadding=3 cellspacing=0 style=' border: 1pt solid #000000; border-Collapse: collapse; font-size: 12px;'>";
|
|
|
386 out += "<tr><th>family</th><th>sample</th><th>region</th><th>#reads</th><th>#basepairs</th><th>region length</th><th>unaligned fasta</th><th>bam alignment</th><th>consensus fasta</th><th>consensus diagram</th></tr>"
|
|
|
387 if (!family) {
|
|
|
388 if(sample){
|
|
|
389 for (var fam in arr) {
|
|
|
390 for (var region in arr[fam]["samples"][sample]) {
|
|
|
391 out+= generateLine(fam,sample,region);
|
|
|
392 }
|
|
|
393
|
|
|
394 out += "</div>";
|
|
|
395 }
|
|
|
396
|
|
|
397 }else{
|
|
|
398 for (var fam in arr) {
|
|
|
399 for(var sample in arr[fam]["samples"]){
|
|
|
400 for (var region in arr[fam]["samples"][sample]) {
|
|
|
401 out+= generateLine(fam,sample,region);
|
|
|
402 }
|
|
12
|
403
|
|
42
|
404 out += "</div>";
|
|
|
405 }
|
|
|
406 }
|
|
|
407 }
|
|
|
408 } else {
|
|
|
409 out += "<b>"+ family+"</b>" ;
|
|
|
410 if (!sample) {
|
|
|
411 for (var sample in arr[family]["samples"]) {
|
|
|
412 for(var region in arr[family]["samples"][sample]){
|
|
|
413
|
|
|
414 out+= generateLine(family,sample,region);
|
|
|
415 }
|
|
|
416 }
|
|
|
417 } else {
|
|
|
418 if(!region){
|
|
|
419 for(var region in arr[family]["samples"][sample]){
|
|
|
420 out+= generateLine(family,sample,region);
|
|
|
421 }
|
|
|
422 } else {
|
|
|
423
|
|
|
424 out+= generateLine(family,sample,region);
|
|
|
425 }
|
|
|
426
|
|
|
427 }
|
|
|
428 }
|
|
|
429 out += "</div>";
|
|
|
430
|
|
|
431 $(div).append(out);
|
|
|
432 $(div).append("<div class='close_files"+elid+"'style='cursor:pointer;'>x</div>");
|
|
|
433 $("a").css({'color':'black'});
|
|
|
434 $("table").css({'border':'collapse'});
|
|
12
|
435
|
|
42
|
436 $(".close_files"+elid).click(function(){
|
|
|
437 $('.files'+elid).animate({'height':'0px'},1000,'',function(){
|
|
|
438 $('.files'+elid).css({'display':'none'});
|
|
|
439 $('.files'+elid).removeClass("selected");
|
|
|
440 });
|
|
|
441
|
|
|
442
|
|
|
443 });
|
|
|
444 $("div.close_files"+elid).css({'color':'white','position':'absolute','top':'2','left':'2','background-color':'red','border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'});
|
|
|
445 $("a.close_files"+elid).css({'color':'white', 'text-decoration': 'none'});
|
|
|
446 $('.files'+elid).css({'width': 'auto','display':'none'});
|
|
|
447 wi=$('.files'+elid).width()+15;
|
|
|
448
|
|
|
449
|
|
12
|
450
|
|
42
|
451 if(!$('.files'+elid).hasClass("selected")){
|
|
|
452 $('.files'+elid).css({'height': 'auto','display':'none'});
|
|
|
453 hei=$('.files'+elid).height();
|
|
|
454 hei=parseInt(hei)+10;
|
|
|
455 hei=hei>400? hei=400 : hei;
|
|
|
456 $('.files'+elid).css({'width':wi+'px','position':'relative','height':'0px', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' });
|
|
|
457 $('.files'+elid).animate({'height':hei+'px'}, 1000,'',function(){
|
|
|
458
|
|
|
459 $('.files'+elid).addClass("selected");
|
|
|
460 });
|
|
|
461 }
|
|
|
462 else{
|
|
|
463
|
|
|
464 curr_hei=$('.files'+elid).height();
|
|
|
465 $('.files'+elid).css({'height': 'auto','display':'none'});
|
|
|
466 hei=$('.files'+elid).height();
|
|
|
467 hei=parseInt(hei)+10;
|
|
|
468 hei=hei>400? hei=400 : hei;
|
|
|
469 $('.files'+elid).css({'height': curr_hei+'px', 'width':wi+'px','position':'relative', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' }).animate({'height':hei+'px'}, 1000);
|
|
|
470 }
|
|
12
|
471 };
|
|
|
472
|
|
42
|
473
|
|
|
474 showImage = function (elid,region, consensus_image,wi) {
|
|
|
475 var div = document.getElementById("image" + elid);
|
|
|
476 div.innerHTML="";
|
|
|
477 out="<div><H3>Consensus Image for Region "+region+"</H3></div>";
|
|
|
478 newImg= new Image();
|
|
|
479 newImg.src=consensus_image;
|
|
|
480 wid=newImg.width;
|
|
|
481 hig=newImg.height;
|
|
|
482 out+="<img id='image_file"+elid+"' src="+consensus_image+" alt="+consensus_image+" style='width:"+wid+";height:"+hig+";'>";
|
|
|
483 $(div).append(out)
|
|
|
484
|
|
|
485
|
|
|
486 $(div).append("<div class='close_image"+elid+"'style='cursor:pointer;'>x</div>");
|
|
|
487 $(".close_image"+elid).click(function(){
|
|
|
488
|
|
|
489 $('.image'+elid).css({'display':'none'});
|
|
|
490 $('.image'+elid).removeClass("selected");
|
|
|
491
|
|
|
492
|
|
|
493 });
|
|
|
494 $("div.close_image"+elid).css({'color':'white','position':'absolute','top':'2','left':'2','background-color':'red','border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'});
|
|
|
495 $("a.close_image"+elid).css({'color':'white', 'text-decoration': 'none'});
|
|
37
|
496
|
|
42
|
497 wi=$('.files'+elid).width();
|
|
|
498
|
|
|
499
|
|
|
500 if(!$('.image'+elid).hasClass("selected")){
|
|
|
501 $('.image'+elid).css({'width':wi+'px','position':'relative','height':'auto', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' });
|
|
|
502
|
|
|
503 }
|
|
|
504
|
|
|
505 };
|
|
|
506
|
|
|
507
|
|
|
508 this.each (
|
|
|
509 function()
|
|
|
510 { init(this); }
|
|
|
511 )
|
|
|
512
|
|
|
513 };
|
|
|
514
|
|
|
515 // default values
|
|
|
516 $.fn.jqBarGraph.defaults = {
|
|
|
517 barSpace: 10,
|
|
|
518 width: 400,
|
|
|
519 height: 600,
|
|
|
520 color: '#000000',
|
|
|
521 colors: false,
|
|
|
522 lbl: '',
|
|
12
|
523 sort: false, // 'asc' or 'desc'
|
|
|
524 sortBar: false,
|
|
42
|
525 tab: 'reads',
|
|
|
526 position: 'bottom', // or 'top' doesn't work for multi type
|
|
|
527 prefix: '',
|
|
|
528 postfix: '',
|
|
|
529 animate: true,
|
|
|
530 speed: 3.0,
|
|
|
531 legendWidth: 150,
|
|
|
532 legend: false,
|
|
|
533 type: false, // or 'multi'
|
|
12
|
534 showValues: false,
|
|
42
|
535 borderSize: 1,
|
|
|
536 showValuesColor: '#fff',
|
|
|
537 title: false
|
|
|
538 };
|
|
12
|
539
|
|
42
|
540 function sortGraph(arr,fun){
|
|
|
541
|
|
|
542 sum = function(ar,tab){
|
|
|
543 total = 0;
|
|
|
544 for(var val in ar){
|
|
|
545 total += ar[val][tab];
|
|
|
546 }
|
|
|
547 return total;
|
|
|
548 };
|
|
|
549
|
|
|
550
|
|
|
551 data = arr.data;
|
|
|
552 keys=Object.keys(data);
|
|
|
553 tab = arr.tab;
|
|
|
554 keys2 = new Array(keys.length);
|
|
|
555
|
|
|
556 for(var key in keys){
|
|
|
557 fam = keys[key];
|
|
|
558 ss=0;
|
|
|
559 for(var sample in data[fam]['samples']){
|
|
|
560
|
|
|
561 s = sum(data[fam]["samples"][sample],tab);
|
|
|
562 }
|
|
|
563 ss = ss+s;
|
|
|
564 keys2[key]={'key':keys[key], 'sum':ss};
|
|
|
565 }
|
|
|
566 keys2.sort(fun);
|
|
|
567
|
|
|
568 for (key in keys){
|
|
|
569
|
|
|
570 keys[key] = keys2[key]['key'];
|
|
|
571 }
|
|
|
572 return keys;
|
|
|
573 };
|
|
|
574
|
|
|
575 //sorting functions
|
|
|
576 function sortAsc(a,b){
|
|
|
577
|
|
|
578 if (a["sum"]<b["sum"]) return -1;
|
|
|
579 if (a["sum"]>b["sum"]) return 1;
|
|
|
580 return 0;
|
|
12
|
581 }
|
|
42
|
582 function sortDesc(a,b){
|
|
|
583
|
|
|
584 if (a["sum"]<b["sum"]) return 1;
|
|
|
585 if (a["sum"]>b["sum"]) return -1;
|
|
|
586 return 0;
|
|
12
|
587 }
|
|
|
588
|
|
|
589
|
|
42
|
590 function sortBar(sample,tab,fun){
|
|
|
591 keys=Object.keys(sample);
|
|
|
592 keys2 = new Array(data_keys.length);
|
|
|
593 for(var key in keys){
|
|
|
594 keys2[key]={ 'key':keys[key],'value':sample[keys[key]][tab]};
|
|
|
595
|
|
|
596 }
|
|
|
597
|
|
|
598 keys2.sort(fun);
|
|
|
599 for (key in keys){
|
|
|
600 keys[key]= keys2[key]['key'];
|
|
|
601 }
|
|
|
602
|
|
|
603 return keys;
|
|
|
604 }
|
|
|
605
|
|
12
|
606
|
|
|
607
|
|
42
|
608
|
|
|
609 function barAsc(a,b){
|
|
|
610 if(a['value']<b['value']) return -1;
|
|
|
611 if(a['value']>b['value']) return 1;
|
|
|
612 return 0;
|
|
|
613 }
|
|
12
|
614
|
|
|
615 function barDesc(a,b){
|
|
42
|
616 if(a['value']<b['value']) return 1;
|
|
|
617 if(a['value']>b['value']) return -1;
|
|
|
618 return 0;
|
|
|
619 }
|
|
|
620
|
|
12
|
621 })(jQuery); |
