# HG changeset patch # User mzeidler # Date 1383584018 18000 # Node ID 310843ad5112ae2d8eada56048f6b3669708c8df # Parent 5f634ebef5692bf107967af39976337440feb57b Uploaded diff -r 5f634ebef569 -r 310843ad5112 jqBarGraph.2.1.js --- a/jqBarGraph.2.1.js Fri Oct 11 04:44:50 2013 -0400 +++ b/jqBarGraph.2.1.js Mon Nov 04 11:53:38 2013 -0500 @@ -1,685 +1,621 @@ -/** - * jqBarGraph - jQuery plugin - * @version: 1.1 (2011/04/03) - * @requires jQuery v1.2.2 or later - * @author Ivan Lazarevic - * Examples and documentation at: http://www.workshop.rs/jqbargraph/ - * - * Dual licensed under the MIT and GPL licenses: - * http://www.opensource.org/licenses/mit-license.php - * http://www.gnu.org/licenses/gpl.html - * - * @param data: arrayOfData // array of data for your graph - * @param title: false // title of your graph, accept HTML - * @param barSpace: 10 // this is default space between bars in pixels - * @param width: 400 // default width of your graph ghhjgjhg - * @param height: 200 //default height of your graph - * @param color: '#000000' // if you don't send colors for your data this will be default bars color - * @param colors: false // array of colors that will be used for your bars and legends - * @param lbl: '' // if there is no label in your array - * @param sort: false // sort your data before displaying graph, you can sort as 'asc' or 'desc' - * @param position: 'bottom' // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type - * @param prefix: '' // text that will be shown before every label - * @param postfix: '' // text that will be shown after every label - * @param animate: true // if you don't need animated appereance change to false - * @param speed: 2 // speed of animation in seconds - * @param legendWidth: 100 // width of your legend box - * @param legend: false // if you want legend change to true - * @param legends: false // array for legend. for simple graph type legend will be extracted from labels if you don't set this - * @param type: false // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type - * @param showValues: true // you can use this for multi and stacked type and it will show values of every bar part - * @param showValuesColor: '#fff' // color of font for values - - * @example $('#divForGraph').jqBarGraph({ data: arrayOfData }); - -**/ - -(function($) { - var opts = new Array; - var level = new Array; - - $.fn.jqBarGraph = $.fn.jqbargraph = function(options){ - - init = function(el){ - - opts[el.id] = $.extend({}, $.fn.jqBarGraph.defaults, options); - $(el).css({ 'width': opts[el.id].width, 'height': opts[el.id].height, 'position':'relative', 'text-align':'center' }); +/** + * jqBarGraph - jQuery plugin + * @version: 1.1 (2011/04/03) + * @requires jQuery v1.2.2 or later + * @author Ivan Lazarevic + * Examples and documentation at: http://www.workshop.rs/jqbargraph/ + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * @param data: arrayOfData // array of data for your graph + * @param title: false // title of your graph, accept HTML + * @param barSpace: 10 // this is default space between bars in pixels + * @param width: 400 // default width of your graph ghhjgjhg + * @param height: 200 //default height of your graph + * @param color: '#000000' // if you don't send colors for your data this will be default bars color + * @param colors: false // array of colors that will be used for your bars and legends + * @param lbl: '' // if there is no label in your array + * @param sort: false // sort your data before displaying graph, you can sort as 'asc' or 'desc' + * @param position: 'bottom' // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type + * @param prefix: '' // text that will be shown before every label + * @param postfix: '' // text that will be shown after every label + * @param animate: true // if you don't need animated appereance change to false + * @param speed: 2 // speed of animation in seconds + * @param legendWidth: 100 // width of your legend box + * @param legend: false // if you want legend change to true + * @param legends: false // array for legend. for simple graph type legend will be extracted from labels if you don't set this + * @param type: false // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type + * @param showValues: true // you can use this for multi and stacked type and it will show values of every bar part + * @param showValuesColor: '#fff' // color of font for values + + * @example $('#divForGraph').jqBarGraph({ data: arrayOfData }); + + **/ + + (function($) { + var opts = new Array; + var level = new Array; + + $.fn.jqBarGraph = $.fn.jqbargraph = function(options){ + + init = function(el){ + + opts[el.id] = $.extend({}, $.fn.jqBarGraph.defaults, options); + $(el).css({'height': opts[el.id].height, 'position':'relative', 'text-align':'center' }); + + + doGraph(el); + + }; + + // sum of array elements + sum = function(ar,tab){ + total = 0; + for(var val in ar){ + total += ar[val][tab]; + } + return total.toFixed(2); + }; + + // count max value of array + max = function(ar,tab){ + maxvalue = 0; + for(var fam in ar){ + for(var sample in ar[fam]["samples"]){ + + value = sum(ar[fam]["samples"][sample],tab); + if (parseFloat(value) > parseFloat(maxvalue)) maxvalue=value; + } + } + return maxvalue; + }; + + + doGraph = function(el){ - - doGraph(el); - - }; - - // sum of array elements - sum = function(ar,index){ - total = 0; - for(val in ar){ - total += ar[val][index]; - } - return total.toFixed(2); - }; - - // count max value of array - max = function(ar,index){ - maxvalue = 0; - for(var val in ar){ - value = ar[val][0]; - if(value instanceof Array) value = sum(value,index); - if (parseFloat(value) > parseFloat(maxvalue)) maxvalue=value; - } - return maxvalue; - }; - - // max value of multi array - maxMulti = function(ar,index){ - maxvalue = 0; - maxvalue2 = 0; - - for(var val in ar){ - ar2 = ar[val][0]; - - for(var val2 in ar2){ - if(ar2[val2][index]>maxvalue2) maxvalue2 = ar2[val2][index]; - } - - if (maxvalue2>maxvalue) maxvalue=maxvalue2; - } - - return maxvalue; - }; - - - doGraph = function(el){ - - arr = opts[el.id]; - data = arr.data; - if(arr.tab=='reads'){ - val_index=0; + arr = opts[el.id]; + data = arr.data; + data_keys=Object.keys(data); + color_map=arr.colors; + + n_bars=0; + + for(fam in data){ + for(sample in data[fam]){ + n_bars+=1; + } } - else{ - val_index=1; - } - - //check if array is bad or empty - if(data == undefined) { - $(el).html('There is not enought data for graph'); - return; - } - //sorting ascending or descending - if(arr.tab == 'reads'){ - if(arr.sort == 'asc'){ - data.sort(sortReadsAsc); - } - if(arr.sort == 'desc'){ - data.sort(sortReadsDesc); - } - } - if(arr.tab == 'basepairs'){ - if(arr.sort == 'asc'){ - data.sort(sortBasesAsc); - } - if(arr.sort == 'desc'){ - data.sort(sortBasesDesc); - } + + + //check if array is bad or empty + if(data == undefined) { + $(el).html('There is not enought data for graph'); + return; } - if(arr.sortBar == 'asc') sortBars(data, barAsc); - if(arr.sortBar == 'desc')sortBars(data, barDesc); - - - - legend = ''; - prefix = arr.prefix; - postfix = arr.postfix; - space = arr.barSpace; //space between bars - legendWidth = arr.legend ? arr.legendWidth : 0; //width of legend box - fieldWidth = ($(el).width()-legendWidth)/data.length; //width of bar - totalHeight = $(el).height(); //total height of graph box - var leg = new Array(); //legends array - - //max value in data, I use this to calculate height of bar - max = max(data,val_index); - - color_map={}; - color_map["pathogen"]=arr.colors[0]; - color_map["ambiguous"]=arr.colors[1]; - color_map["human"]=arr.colors[2]; + //sorting ascending or descending - if(arr.tab=='reads'){ - val_index=0; + if(arr.sort == 'asc'){ + data_keys=sortGraph(arr,sortAsc); } - else{ - val_index=1; - + if(arr.sort == 'desc'){ + data_keys=sortGraph(arr,sortDesc); } - - for(var val in data){ - - valueData = data[val][0]; - if (valueData instanceof Array) - value = sum(valueData,val_index); - else - value = valueData; - - lbl = data[val][1]; - unique = val+el.id; //unique identifier - divid=""+el.id; - - if(arr.type == 'multi') color = 'none'; - - if (lbl == undefined) lbl = arr.lbl; - - margin_top=14/(data.length); - - - out = "
"; - out += "
"+parseInt(value)+"
"; - - out += "
"; - //console.log(color) - // if there is no legend or exist legends display lbl at the bottom - - out += "
"+lbl+"
"; - out += "
"; - - - - $(el).append(out); - $(".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'}); - $('a.graphLabel').css({ - 'text-decoration': 'none', - 'color':'black' - }); - - //$('#graphLabel'+el.id).rotateLeft(); - - //size of bar - totalHeightBar = totalHeight - $('.graphLabel'+el.id).height() - $('.graphValue'+el.id).height()-margin_top; - fieldHeight = (totalHeightBar*value)/max; - $('#graphField'+unique).css({ - 'left': (fieldWidth)*val, - 'width': fieldWidth-space, - 'margin-left': space}); - - // multi array - if(valueData instanceof Array){ - - if(arr.type=="multi"){ - - maxe = maxMulti(data,val_index); - totalHeightBar = fieldHeight = totalHeight - $('.graphLabel'+el.id).height()-margin_top; - $('.graphValue'+el.id).remove(); - } else { - - maxe = max; - } - - for (i in valueData){ - heig = (totalHeightBar*valueData[i][val_index]/maxe); - if(navigator.userAgent.match('Safari') && !navigator.userAgent.match('Chrom')){ - - heig = heig + (arr.borderSize/1.85); - } - - wid = parseInt((fieldWidth-space)/valueData.length); - - sv = ''; // show values - fs = 0; // font size - if (arr.showValues){ - sv = arr.prefix+valueData[i][0]+arr.postfix; - fs = 12; // font-size is 0 if showValues = false - } - o = "
"+sv+"
"; - $('#graphFieldBar'+unique).prepend(o); - } - } - - if(arr.type=='multi') - $('.subBars'+el.id).css({ 'width': wid, 'position': 'absolute', 'bottom': 0 }); - - //position of bars - if(arr.position == 'bottom') $('.graphField'+el.id).css('bottom',0); - - - - - - // animated apearing - if(arr.animate){ - $('#graphFieldBar'+unique).css({ 'height' : 0 }); - $('#graphFieldBar'+unique).animate({'height': fieldHeight},arr.speed*1000); - } else { - $('#graphFieldBar'+unique).css({'height': fieldHeight}); - } - - } - - - - createLegend(color_map,el.id); // create legend from array - createLinks(el.id); - //position of legend - - $(el).append("
"); - $('#legendHolder'+unique).css({ 'width': legendWidth, 'float': 'right', 'margin-left':'100px','text-align' : 'left'}); - $('#legendHolder'+unique).append(legend); - $('#legendHolder'+unique).append(links); - $('.legendBar'+el.id).css({ 'float':'left', 'margin': 3, 'margin-left':'10','height': 12, 'width': 20, 'font-size': 0}); - $('.linkBar'+el.id).css({'margin-left':'10'}); + + + max1 = max(data,arr.tab); + + m = Math.max(max(data,'reads'),max(data,'bp')); + + w = (m+"").length * 10; + legend = ''; + prefix = arr.prefix; + postfix = arr.postfix; + space = arr.barSpace; //space between bars + legendWidth = arr.legend ? arr.legendWidth : 0; //width of legend box + fieldWidth = w //width of bar + + totalHeight = $(el).height(); //total height of graph box + var leg = new Array(); //legends array + + //max value in data, I use this to calculate height of bar + + + var i=0; + var fields=0 + for(var key in data_keys){ + space=arr.barSpace; + fam = data_keys[key]; + + for(var sample in data[fam]["samples"]){ + + valueData = data[fam]["samples"][sample]; + value = sum(valueData,arr.tab); + sample_keys=Object.keys(valueData); + + lbl = fam + unique = fam+sample+el.id; //unique identifier + fieldWidth = w+space; + fields = fields+w+arr.barSpace; + + if (lbl == undefined) lbl = arr.lbl; + + margin_top=4; + + unique_fam = fam+el.id; + out = "
"; + + out += "
"+parseInt(value)+"
"; + + out += "
"; + //console.log(color) + // if there is no legend or exist legends display lbl at the bottom + + out += "
"+lbl+"
"; + out += "
"; + + + + $(el).append(out); + $(".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'}); + $('a.graphLabel').css({ + 'text-decoration': 'none', + 'color':'black' + }); + + totalHeightBar = totalHeight - $('.graphLabel'+el.id).height() - $('.graphValue'+el.id).height()-margin_top; + fieldHeight = (totalHeightBar*value)/max1; + + $('#graphField'+unique).css({ + 'left': (w+arr.barSpace)*i, + 'width': w, + 'margin-left': space}); + + + maxe = max1; + k=0; + for(var r in valueData){ + k+=1; + } + + + if(arr.sortBar=='asc'){ + sample_keys=sortBar(valueData,arr.tab, barAsc); + } + if(arr.sortBar=='desc'){ + sample_keys=sortBar(valueData,arr.tab, barDesc); + } + + + for(var s_key in sample_keys){ + region = sample_keys[s_key]; + + heig = (totalHeightBar*valueData[region][arr.tab]/maxe); + + if(navigator.userAgent.match('Safari') && !navigator.userAgent.match('Chrom')){ + + heig = heig + (arr.borderSize/1.85); + } + + wid = parseInt((fieldWidth-space)/k); + sv = ''; // show values + fs = 0; // font size + if (arr.showValues){ + sv = arr.prefix+valueData[region][arr.tab]+arr.postfix; + fs = 12; // font-size is 0 if showValues = false + } + + o = "
"+sv+"
"; + $('#graphFieldBar'+unique).prepend(o); + } + + //position of bars + if(arr.position == 'bottom') $('.graphField'+el.id).css('bottom',0); + + + + + + // animated apearing + if(arr.animate){ + $('#graphFieldBar'+unique).css({ 'height' : 0 }); + $('#graphFieldBar'+unique).animate({'height': fieldHeight},arr.speed*1000); + } else { + $('#graphFieldBar'+unique).css({'height': fieldHeight}); + } + i=i+1; + space=0; + } - - $("#sortAsc"+el.id).click(function(){ - if(opts[el.id].sort!='asc'){ - opts[el.id].sort='asc'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - } - - }); - $("#sortDesc"+el.id).click(function(){ - if(opts[el.id].sort!='desc'){ - opts[el.id].sort='desc'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - } - - }); - $("#sortBarAsc"+el.id).click(function(){ - if(opts[el.id].sortBar!='asc'){ - opts[el.id].sortBar='asc'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - } - - }); - $("#sortBarDesc"+el.id).click(function(){ - if(opts[el.id].sortBar!='desc'){ - opts[el.id].sortBar='desc'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - } - - }); - - $("#showBasepairs"+el.id).click(function(){ - opts[el.id].tab='basepairs'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - - - - }); - $("#showReads"+el.id).click(function(){ - opts[el.id].tab='reads'; - $('#graphHolder'+el.id).html(''); - $('#graphHolder'+el.id).jqbargraph(opts[el.id]); - - - - }); - - - - //position of title - if(arr.title){ + } + ws = fields + legendWidth + 40; + $(el).css({'width': ws}) + arr.width=ws; + + createLegend(color_map,el.id); // create legend from array + createLinks(el.id); + //position of legend + + $(el).append("
"); + $('#legendHolder'+el.id).css({ 'width': 200, 'float': 'right','text-align' : 'left'}); + $('#legendHolder'+el.id).append(legend); + $('#legendHolder'+el.id).append(links); + $('.legendBar'+el.id).css({ 'float':'left', 'margin': 3, 'margin-left':'40','height': 12, 'width': 20, 'font-size': 0}); + $('.linkBar'+el.id).css({'margin-left':'40'}); + + + $("#sortAsc"+el.id).click(function(){ + if(opts[el.id].sort!='asc'){ + opts[el.id].sort='asc'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + } + + }); + $("#sortDesc"+el.id).click(function(){ + if(opts[el.id].sort!='desc'){ + opts[el.id].sort='desc'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + } + + }); + $("#sortBarAsc"+el.id).click(function(){ + if(opts[el.id].sortBar!='asc'){ + opts[el.id].sortBar='asc'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + } + + }); + $("#sortBarDesc"+el.id).click(function(){ + if(opts[el.id].sortBar!='desc'){ + opts[el.id].sortBar='desc'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + } + + }); + + $("#showBasepairs"+el.id).click(function(){ + opts[el.id].tab='bp'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + + + + }); + $("#showReads"+el.id).click(function(){ + opts[el.id].tab='reads'; + $('#graphHolder'+el.id).html(''); + $('#graphHolder'+el.id).jqbargraph(opts[el.id]); + + + + }); + + + + //position of title + if(arr.title){ $(el).wrap("
"); if(arr.tab=='reads'){ - $('#graphHolder'+el.id).prepend("
Cumulative reads assigned to family
").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); + $('#graphHolder'+el.id).prepend("
Cumulative reads assigned to family
").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); }else{ - $('#graphHolder'+el.id).prepend("
Cumulative basepairs assigned to family
").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); + $('#graphHolder'+el.id).prepend("
Cumulative basepairs assigned to family
").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); } - $('#graphHolder'+el.id).prepend(""+arr.title+"").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); - - } - $("#graphHolder"+el.id).append("

"); - $('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'}) - - $("#graphHolder"+el.id).append("

"); - $('.image'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'}) - - }; - - - //creating legend from array - createLegend = function(color_map,id){ - legend = ''; - for(var val in color_map){ - legend += "
"; - legend += "
"; - legend += "
"+val+"
"; - legend += "
"; - } + $('#graphHolder'+el.id).prepend(""+arr.title+"").css({ 'width' : arr.width+'px', 'text-align' : 'center' }); + + } + $("#graphHolder"+el.id).append("

"); + $('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'}) + + $("#graphHolder"+el.id).append("

"); + $('.image'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'}) + + }; + + + //creating legend from array + createLegend = function(color_map,id){ + legend = ''; + for(var sample in color_map){ + legend += "
"+sample+"
"; + for(var state in color_map[sample]){ + legend += "
"; + legend += "
"; + legend += "
"+state+"
"; + legend += "
"; + } + } }; createLinks = function(id){ - links="
"; - links+="
sort ascending
" - links+="
sort descending
" - links+="
sort bars ascending
" - links+="
sort bars descending
" - if(opts[id].tab=='reads'){ - links+="
show basepair chart
" - }else{ - links+="
show read chart
" - } - links+="
" - - + links="
"; + links+="
sort ascending
" + links+="
sort descending
" + links+="
sort bars ascending
" + links+="
sort bars descending
" + if(opts[id].tab=='reads'){ + links+="
show basepair chart
" + }else{ + links+="
show read chart
" + } + links+="
" + + }; - fillDiv = function (elid, dir, region) { - - - - arr=opts[elid]; - - dict=arr.files; - - generateDownloadLink = function(family,region,filetype){ - out=" no file "; + fillDiv = function (elid, family,sample, region) { + + + + arr=opts[elid].data; + + generateDownloadLink = function(family,sample,region,filetype){ + out=" no file "; + + if(arr[family]["samples"][sample][region]["files"][filetype]){ + out="download"; + } + return out; + + }; + generateShowLink = function(family,sample,region){ + out=" no image "; + if(arr[family]["samples"][sample][region]["files"]["consensus.png"]){ + out="show"; + } + return out; + + }; + generateLine=function(family,sample,region){ + + return ""+family+""+sample+""+region+""+arr[family]["samples"][sample][region]["reads"]+""+arr[family]["samples"][sample][region]["bp"]+""+arr[family]["samples"][sample][region]["length"]+""+generateDownloadLink(family,sample,region,"unaligned.fa.bzip2")+""+generateDownloadLink(family,sample,region,"alignment.bam")+""+generateDownloadLink(family,sample,region,"consensus.fa")+""+generateShowLink(family,sample,region)+" "+generateDownloadLink(family,sample,region,"consensus.png")+""; - if($.inArray("region_"+region+"_"+filetype,dict[family][region])!=-1){ - out="download"; - } - return out; - - }; - generateShowLink = function(family,region){ - out=" no image "; + }; + + + var div = document.getElementById("files" + elid); + div.innerHTML=""; + + out = "

Files for selected data "+sample+"

"; - if($.inArray("region_"+region+"_consensus.png",dict[family][region])!=-1){ - out="show"; - } - return out; - - }; + out += "

"; + out += "" + if (!family) { + if(sample){ + for (var fam in arr) { + for (var region in arr[fam]["samples"][sample]) { + out+= generateLine(fam,sample,region); + } + + out += ""; + } + + }else{ + for (var fam in arr) { + for(var sample in arr[fam]["samples"]){ + for (var region in arr[fam]["samples"][sample]) { + out+= generateLine(fam,sample,region); + } - - data = arr.data - for(var val in data){ - for(var element in data[val][0]){ - dict[data[val][0][0][3]+"_"+data[val][1]][data[val][0][element][5]].push([data[val][0][element][0],data[val][0][element][1],data[val][0][element][4]]); - - } - } - - var div = document.getElementById("files" + elid); - div.innerHTML=""; - - out = "

Files for Sample "+arr.sample+"

"; - - out += "

familysampleregion#reads#basepairsregion lengthunaligned fastabam alignmentconsensus fastaconsensus diagram
"; - out += "" - if (!dir) { - for (var directory in dict) { - //out += ""+directory+""; - //out += "
"; - } - } - out += ""; - } - } else { - out += ""+ dir+"" ; - - if (!region) { - for (var region in dict[dir]) { - last = dict[dir][region][dict[dir][region].length-1]; - if(last instanceof Array && last[0]){ - out += ""; - } - } - } else { + out += ""; + } + } + } + } else { + out += ""+ family+"" ; + if (!sample) { + for (var sample in arr[family]["samples"]) { + for(var region in arr[family]["samples"][sample]){ + + out+= generateLine(family,sample,region); + } + } + } else { + if(!region){ + for(var region in arr[family]["samples"][sample]){ + out+= generateLine(family,sample,region); + } + } else { + + out+= generateLine(family,sample,region); + } + + } + } + out += ""; + + $(div).append(out); + $(div).append("
x
"); + $("a").css({'color':'black'}); + $("table").css({'border':'collapse'}); - last = dict[dir][region][dict[dir][region].length-1]; - if(last instanceof Array && last[0]){ - out += ""; - } - } - } - out += ""; - - $(div).append(out); - $(div).append("
x
"); - $("a").css({'color':'black'}); - $("table").css({'border':'collapse'}); - - $(".close_files"+elid).click(function(){ - $('.files'+elid).animate({'height':'0px'},1000,'',function(){ - $('.files'+elid).css({'display':'none'}); - $('.files'+elid).removeClass("selected"); - }); - - - }); - $("div.close_files"+elid).css({'color':'white','position':'absolute','top':'2','left':'2','background-color':arr.colors[1],'border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'}); - $("a.close_files"+elid).css({'color':'white', 'text-decoration': 'none'}); - $('.files'+elid).css({'width': 'auto','display':'none'}); - wi=$('.files'+elid).width()+15; - + $(".close_files"+elid).click(function(){ + $('.files'+elid).animate({'height':'0px'},1000,'',function(){ + $('.files'+elid).css({'display':'none'}); + $('.files'+elid).removeClass("selected"); + }); + + + }); + $("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'}); + $("a.close_files"+elid).css({'color':'white', 'text-decoration': 'none'}); + $('.files'+elid).css({'width': 'auto','display':'none'}); + wi=$('.files'+elid).width()+15; + + - - if(!$('.files'+elid).hasClass("selected")){ - $('.files'+elid).css({'height': 'auto','display':'none'}); - hei=$('.files'+elid).height(); - hei=parseInt(hei)+10; - hei=hei>400? hei=400 : hei; - $('.files'+elid).css({'width':wi+'px','position':'relative','height':'0px', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' }); - $('.files'+elid).animate({'height':hei+'px'}, 1000,'',function(){ - - $('.files'+elid).addClass("selected"); - }); - } - else{ - - curr_hei=$('.files'+elid).height(); - $('.files'+elid).css({'height': 'auto','display':'none'}); - hei=$('.files'+elid).height(); - hei=parseInt(hei)+10; - hei=hei>400? hei=400 : hei; - $('.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); - } + if(!$('.files'+elid).hasClass("selected")){ + $('.files'+elid).css({'height': 'auto','display':'none'}); + hei=$('.files'+elid).height(); + hei=parseInt(hei)+10; + hei=hei>400? hei=400 : hei; + $('.files'+elid).css({'width':wi+'px','position':'relative','height':'0px', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' }); + $('.files'+elid).animate({'height':hei+'px'}, 1000,'',function(){ + + $('.files'+elid).addClass("selected"); + }); + } + else{ + + curr_hei=$('.files'+elid).height(); + $('.files'+elid).css({'height': 'auto','display':'none'}); + hei=$('.files'+elid).height(); + hei=parseInt(hei)+10; + hei=hei>400? hei=400 : hei; + $('.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); + } }; - - showImage = function (elid,region, consensus_image,wi) { - var div = document.getElementById("image" + elid); - div.innerHTML=""; - out="

Consensus Image for Region "+region+"

"; - newImg= new Image(); - newImg.src=consensus_image; - wid=0; - hig=0; - newImg.onload = function(){ - wid=this.width; - hig=this.height; - }; + + showImage = function (elid,region, consensus_image,wi) { + var div = document.getElementById("image" + elid); + div.innerHTML=""; + out="

Consensus Image for Region "+region+"

"; + newImg= new Image(); + newImg.src=consensus_image; + wid=newImg.width; + hig=newImg.height; + out+="+consensus_image+"; + $(div).append(out) + + + $(div).append("
x
"); + $(".close_image"+elid).click(function(){ + + $('.image'+elid).css({'display':'none'}); + $('.image'+elid).removeClass("selected"); + + + }); + $("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'}); + $("a.close_image"+elid).css({'color':'white', 'text-decoration': 'none'}); - out+="+consensus_image+"; - $(div).append(out) - - - $(div).append("
x
"); - $(".close_image"+elid).click(function(){ - - $('.image'+elid).css({'display':'none'}); - $('.image'+elid).removeClass("selected"); - - - }); - $("div.close_image"+elid).css({'color':'white','position':'absolute','top':'2','left':'2','background-color':arr.colors[1],'border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'}); - $("a.close_image"+elid).css({'color':'white', 'text-decoration': 'none'}); - - wi=$('.files'+elid).width(); - - - if(!$('.image'+elid).hasClass("selected")){ - $('.image'+elid).css({'width':wi+'px','position':'relative','height':'auto', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' }); - - } - - }; - - - this.each ( - function() - { init(this); } - ) - -}; - - // default values - $.fn.jqBarGraph.defaults = { - sample: 'no_sample_id', - barSpace: 10, - width: 400, - height: 600, - color: '#000000', - colors: false, - lbl: '', + wi=$('.files'+elid).width(); + + + if(!$('.image'+elid).hasClass("selected")){ + $('.image'+elid).css({'width':wi+'px','position':'relative','height':'auto', 'overflow' : 'auto','background-color':'rgb(223, 229, 249)', 'border':'2px solid silver', 'display':'block' }); + + } + + }; + + + this.each ( + function() + { init(this); } + ) + +}; + + // default values + $.fn.jqBarGraph.defaults = { + barSpace: 10, + width: 400, + height: 600, + color: '#000000', + colors: false, + lbl: '', sort: false, // 'asc' or 'desc' sortBar: false, - tab: 'reads', - position: 'bottom', // or 'top' doesn't work for multi type - prefix: '', - postfix: '', - animate: true, - speed: 3.0, - legendWidth: 150, - legend: false, - type: false, // or 'multi' + tab: 'reads', + position: 'bottom', // or 'top' doesn't work for multi type + prefix: '', + postfix: '', + animate: true, + speed: 3.0, + legendWidth: 150, + legend: false, + type: false, // or 'multi' showValues: false, - borderSize: 1, - showValuesColor: '#fff', - title: false - }; + borderSize: 1, + showValuesColor: '#fff', + title: false + }; - - //sorting functions - function sortReadsAsc(a,b){ - sum_a=0 - for(var values in a){ - if(a[values] instanceof Array){ - for(var val in a[values]){ - sum_a+=a[values][val][0]; - } - } - } - sum_b=0 - for(var values in b){ - if(b[values] instanceof Array){ - for(var val in b[values]){ - sum_b+=b[values][val][0]; - } - } - } - - if (sum_asum_b) return 1; - return 0; + function sortGraph(arr,fun){ + + sum = function(ar,tab){ + total = 0; + for(var val in ar){ + total += ar[val][tab]; + } + return total; + }; + + + data = arr.data; + keys=Object.keys(data); + tab = arr.tab; + keys2 = new Array(keys.length); + + for(var key in keys){ + fam = keys[key]; + ss=0; + for(var sample in data[fam]['samples']){ + + s = sum(data[fam]["samples"][sample],tab); + } + ss = ss+s; + keys2[key]={'key':keys[key], 'sum':ss}; + } + keys2.sort(fun); + + for (key in keys){ + + keys[key] = keys2[key]['key']; + } + return keys; + }; + + //sorting functions + function sortAsc(a,b){ + + if (a["sum"]b["sum"]) return 1; + return 0; } - function sortBasesAsc(a,b){ - sum_a=0 - for(var values in a){ - if(a[values] instanceof Array){ - for(var val in a[values]){ - sum_a+=a[values][val][1]; - } - } - } - sum_b=0 - for(var values in b){ - if(b[values] instanceof Array){ - for(var val in b[values]){ - sum_b+=b[values][val][1]; - } - } - } - - if (sum_asum_b) return 1; - return 0; - } - - function sortReadsDesc(a,b){ - sum_a=0 - for(var values in a){ - if(a[values] instanceof Array){ - for(var val in a[values]){ - sum_a+=a[values][val][0]; - } - } - } - sum_b=0 - for(var values in b){ - if(b[values] instanceof Array){ - for(var val in b[values]){ - sum_b+=b[values][val][0]; - } - } - } - - if (sum_asum_b) return -1; - return 0; - } - function sortBasesDesc(a,b){ - sum_a=0 - for(var values in a){ - if(a[values] instanceof Array){ - for(var val in a[values]){ - sum_a+=a[values][val][1]; - } - } - } - sum_b=0 - for(var values in b){ - if(b[values] instanceof Array){ - for(var val in b[values]){ - sum_b+=b[values][val][1]; - } - } - } - - if (sum_asum_b) return -1; - return 0; + function sortDesc(a,b){ + + if (a["sum"]b["sum"]) return -1; + return 0; } - function sortBars(data,fun){ - for(var values in data){ - last = data[values].pop(); - for(var val in data[values]){ - data[values][val].sort(fun); - } - data[values].push(last); - } - } - function sortBars(data,fun){ - for(var values in data){ - last = data[values].pop(); - for(var val in data[values]){ - data[values][val].sort(fun); - } - data[values].push(last); - } - } + function sortBar(sample,tab,fun){ + keys=Object.keys(sample); + keys2 = new Array(data_keys.length); + for(var key in keys){ + keys2[key]={ 'key':keys[key],'value':sample[keys[key]][tab]}; + + } + + keys2.sort(fun); + for (key in keys){ + keys[key]= keys2[key]['key']; + } + + return keys; + } + - - function barAsc(a,b){ - if(a[0]b[0]) return 1; - return 0; - } + + function barAsc(a,b){ + if(a['value']b['value']) return 1; + return 0; + } function barDesc(a,b){ - if(a[0]b[0]) return -1; - return 0; - } - + if(a['value']b['value']) return -1; + return 0; + } + })(jQuery); \ No newline at end of file
familyregion#reads#basepairsregion lengthunaligned fastabam alignmentconsensus fastaconsensus diagram
"+region+""+last[0]+""+last[1]+""+last[2]+""+generateDownloadLink(directory,region,"unaligned.fa.bzip2")+""+generateDownloadLink(directory,region,"alignment.bam")+""+generateDownloadLink(directory,region,"consensus.fa")+""+generateShowLink(directory,region)+" "+generateDownloadLink(directory,region,"consensus.png")+"
"+dir+""+region+""+last[0]+""+last[1]+""+last[2]+""+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+""+generateDownloadLink(dir,region,"alignment.bam")+""+generateDownloadLink(dir,region,"consensus.fa")+""+generateShowLink(dir,region)+" "+generateDownloadLink(dir,region,"consensus.png")+"
"+dir+""+region+""+last[0]+""+last[1]+""+last[2]+""+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+""+generateDownloadLink(dir,region,"alignment.bam")+""+generateDownloadLink(dir,region,"consensus.fa")+""+generateShowLink(dir,region)+" "+generateDownloadLink(dir,region,"consensus.png")+"