changeset 42:310843ad5112 draft

Uploaded

--- 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  = "<div class='graphField"+el.id+"' id='graphField"+unique+"' style='position: absolute'>";
- 			out += "<div class='graphValue"+el.id+"' id='graphValue"+unique+"'>"+parseInt(value)+"</div>";
- 			
- 			out += "<div class='graphBar"+el.id+"' id='graphFieldBar"+unique+"' style='background-color:#fff;position: relative; overflow: hidden;'></div>";
-            //console.log(color)
-			// if there is no legend or exist legends display lbl at the bottom
- 			
- 				out += "<a class='graphLabelLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+valueData[0][3]+"_"+lbl+"')><div class='graphLabel"+el.id+"' id='graphLabel"+unique+"'style='margin-top:"+margin_top+"px;'>"+lbl+"</div></a>";
- 			out += "</div>";
- 			
- 			
- 			 			
-			$(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 = "<a class='subBarLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+valueData[i][3]+"_"+lbl+"','"+valueData[i][5]+"')><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[valueData[i][2]]+"; left:"+wid*i+"px; color:"+arr.showValuesColor+"; font-size:"+fs+"px' >"+sv+"</div></a>";
- 					$('#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("<div id='legendHolder"+unique+"'></div>");
-	 		$('#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  = "<div class='graphField"+el.id+"' id='graphField"+unique+"' style='position: absolute'>";
+
+				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>";
+
+				out += "<div class='graphBar"+el.id+"' id='graphFieldBar"+unique+"' style='background-color:#fff;position: relative; overflow: hidden;'></div>";
+	            //console.log(color)
+				// if there is no legend or exist legends display lbl at the bottom
+
+				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>";
+				out += "</div>";
+
+
+
+				$(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 = "<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>";
+	 				$('#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("<div id='legendHolder"+el.id+"'></div>");
+ 		$('#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("<div id='graphHolder"+el.id+"'></div>");
  			if(arr.tab=='reads'){
- 			    $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative reads assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
+ 				$('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative reads assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
  			}else{
-   			    $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative basepairs assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
+ 				$('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative basepairs assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
  			}
- 			$('#graphHolder'+el.id).prepend("<a href=#files"+el.id+" onclick=fillDiv('"+el.id+"')>"+arr.title+"</a>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
- 		    
-  		}
- 		    $("#graphHolder"+el.id).append("<div class='files"+el.id+"' id='files"+el.id+"' ></div><p/>");
- 		    $('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
- 		    
- 		     $("#graphHolder"+el.id).append("<div class='image"+el.id+"' id='image"+el.id+"' ></div>");
- 		    $('.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 += "<div id='legend"+val+"' style='overflow: hidden; zoom: 1;'>";
-	 			legend += "<div class='legendBar"+id+"' id='legendColor"+val+"' style='background-color:"+color_map[val]+"'></div>";
-	 			legend += "<div class='legendLabel"+id+"' id='graphLabel"+unique+"'>"+val+"</div>";
-	 			legend += "</div>";			
-		}
+ 			$('#graphHolder'+el.id).prepend("<a href=#files"+el.id+" onclick=fillDiv('"+el.id+"')>"+arr.title+"</a>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
+
+ 		}
+ 		$("#graphHolder"+el.id).append("<div class='files"+el.id+"' id='files"+el.id+"' ></div><p/>");
+ 		$('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
+
+ 		$("#graphHolder"+el.id).append("<div class='image"+el.id+"' id='image"+el.id+"' ></div>");
+ 		$('.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 += "<div id='legend"+sample+"' style='overflow: hidden; zoom: 1; margin-left: 20;'><b>"+sample+"</b></div>";
+			for(var state in color_map[sample]){
+				legend += "<div id='legend"+sample+state+"' style='overflow: hidden; zoom: 1;'>";
+				legend += "<div class='legendBar"+id+"' id='legendColor"+sample+state+"' style='background-color:"+color_map[sample][state]+"'></div>";
+				legend += "<div class='legendLabel"+id+"' id='graphLabel"+unique+"'>"+state+"</div>";
+				legend += "</div>";	
+			}			
+		}
 	};
 	
 	createLinks = function(id){
-	   links="<div class='linkBar"+id+"'>";
-	   links+="<div ><a href='javascript:void(0);' id='sortAsc"+id+"' >sort  ascending</a></div>"
-	   links+="<div ><a href='javascript:void(0);' id='sortDesc"+id+"'>sort  descending</a></div>"
-	   links+="<div ><a href='javascript:void(0);' id='sortBarAsc"+id+"'>sort bars ascending</a></div>"
-	   links+="<div ><a href='javascript:void(0);' id='sortBarDesc"+id+"'>sort bars descending</a></div>"
-	   if(opts[id].tab=='reads'){
-	       links+="<div ><a href='javascript:void(0);' id='showBasepairs"+id+"'>show basepair chart </a></div>"    
-	   }else{
-	       links+="<div ><a href='javascript:void(0);' id='showReads"+id+"'>show read chart </a></div>"    
-	   }
-	   links+="</div>"
-	   
-	     
+		links="<div class='linkBar"+id+"'>";
+		links+="<div ><a href='javascript:void(0);' id='sortAsc"+id+"' >sort  ascending</a></div>"
+		links+="<div ><a href='javascript:void(0);' id='sortDesc"+id+"'>sort  descending</a></div>"
+		links+="<div ><a href='javascript:void(0);' id='sortBarAsc"+id+"'>sort bars ascending</a></div>"
+		links+="<div ><a href='javascript:void(0);' id='sortBarDesc"+id+"'>sort bars descending</a></div>"
+		if(opts[id].tab=='reads'){
+			links+="<div ><a href='javascript:void(0);' id='showBasepairs"+id+"'>show basepair chart </a></div>"    
+		}else{
+			links+="<div ><a href='javascript:void(0);' id='showReads"+id+"'>show read chart </a></div>"    
+		}
+		links+="</div>"
+
+
 	};
 	
-	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="<a href="+arr[family]["type"]+"_"+family+"/region_"+region+"_"+filetype+">download</a>";
+			}
+			return out;
+
+		};
+		generateShowLink = function(family,sample,region){
+			out=" no image ";
+			if(arr[family]["samples"][sample][region]["files"]["consensus.png"]){
+				out="<a href=#image"+elid+" onclick=showImage('"+elid+"','"+region+"','"+arr[family]["type"]+"_"+family +"/region_"+region+"_consensus.png')>show</a>";
+			}
+			return out;
+
+		};
+		generateLine=function(family,sample,region){
+
+			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>";
 
-	           if($.inArray("region_"+region+"_"+filetype,dict[family][region])!=-1){
-	               out="<a href="+family+"/region_"+region+"_"+filetype+">download</a>";
-	           }
-	           return out;
-	           
-	        };
-	        generateShowLink = function(family,region){
-	           out=" no image ";
+		};
+
+
+		var div = document.getElementById("files" + elid);
+		div.innerHTML="";
+
+		out = "<div><H3>Files for selected data "+sample+"</H3></div><p/>";
 
-	           if($.inArray("region_"+region+"_consensus.png",dict[family][region])!=-1){
-	               out="<a href=#image"+elid+" onclick=showImage('"+elid+"','"+region+"','"+ family +"/region_"+region+"_consensus.png')>show</a>";
-	           }
-	           return out;
-	           
-	        };
+		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;'>";
+		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>"
+		if (!family) {
+			if(sample){
+				for (var fam in arr) {
+					for (var region in arr[fam]["samples"][sample]) {
+						out+= generateLine(fam,sample,region);
+					}
+
+					out += "</div>";
+				}
+
+			}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 = "<div><H3>Files for Sample "+arr.sample+"</H3></div><p/>";
-            
-            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;'>";
-            out += "<tr><th>family</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>"
-            if (!dir) {
-                for (var directory in dict) {
-                    //out += "<b>"+directory+"</b>";
-                    //out += "<div class='dirlist' id='" + directory + "_files'";
-                    for (var region in dict[directory]) {
-                        last = dict[directory][region][dict[directory][region].length-1];
-                        if(last instanceof Array && last[0]){
-                            out += "<tr><td>"+directory+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(directory,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(directory,region,"alignment.bam")+"</td><td>"+generateDownloadLink(directory,region,"consensus.fa")+"</td><td>"+generateShowLink(directory,region)+" "+generateDownloadLink(directory,region,"consensus.png")+"</td></tr>";
-                        }
-                    }
-                    out += "</div>";
-                }
-            } else {
-                out += "<b>"+ dir+"</b>" ;
-                
-                if (!region) {
-                    for (var region in dict[dir]) {
-                        last = dict[dir][region][dict[dir][region].length-1];
-                        if(last instanceof Array && last[0]){
-                            out += "<tr><td>"+dir+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(dir,region,"alignment.bam")+"</td><td>"+generateDownloadLink(dir,region,"consensus.fa")+"</td><td>"+generateShowLink(dir,region)+" "+generateDownloadLink(dir,region,"consensus.png")+"</td></tr>";
-                        }
-                    }
-                } else {
+						out += "</div>";
+					}
+				}
+			}
+		} else {
+			out += "<b>"+ family+"</b>" ;
+			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>";
+
+		$(div).append(out);
+		$(div).append("<div class='close_files"+elid+"'style='cursor:pointer;'>x</div>");
+		$("a").css({'color':'black'});
+		$("table").css({'border':'collapse'});
 
-                    last = dict[dir][region][dict[dir][region].length-1];
-                    if(last instanceof Array && last[0]){
-                        out += "<tr><td>"+dir+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(dir,region,"alignment.bam")+"</td><td>"+generateDownloadLink(dir,region,"consensus.fa")+"</td><td>"+generateShowLink(dir,region)+"     "+generateDownloadLink(dir,region,"consensus.png")+"</td></tr>";
-                    }
-                }
-            }
-            out += "</div>";
-            
-            $(div).append(out);
-            $(div).append("<div class='close_files"+elid+"'style='cursor:pointer;'>x</div>");
-            $("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="<div><H3>Consensus Image for Region "+region+"</H3></div>";
-            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="<div><H3>Consensus Image for Region "+region+"</H3></div>";
+		newImg= new Image();
+		newImg.src=consensus_image;
+		wid=newImg.width;
+		hig=newImg.height;
+		out+="<img id='image_file"+elid+"' src="+consensus_image+" alt="+consensus_image+" style='width:"+wid+";height:"+hig+";'>";
+		$(div).append(out)
+
+
+		$(div).append("<div class='close_image"+elid+"'style='cursor:pointer;'>x</div>");
+		$(".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+="<img id='image_file"+elid+"' src="+consensus_image+" alt="+consensus_image+" style='width:"+wid+";height:"+hig+";'>";
-            $(div).append(out)
-     
-     
-            $(div).append("<div class='close_image"+elid+"'style='cursor:pointer;'>x</div>");
-            $(".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_a<sum_b) return -1;
-		if (sum_a>sum_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;
+		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_a<sum_b) return -1;
-		if (sum_a>sum_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_a<sum_b) return 1;
-		if (sum_a>sum_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_a<sum_b) return 1;
-		if (sum_a>sum_b) return -1;
-		return 0;
+	function sortDesc(a,b){
+
+		if (a["sum"]<b["sum"]) return 1;
+		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;
-        if(a[0]>b[0]) return 1;
-        return 0;   
-    }
+
+	function barAsc(a,b){
+		if(a['value']<b['value']) return -1;
+		if(a['value']>b['value']) return 1;
+		return 0;   
+	}
 	
 	function barDesc(a,b){
-	    if(a[0]<b[0]) return 1;
-        if(a[0]>b[0]) return -1;
-	    return 0;  
-	}
-
+		if(a['value']<b['value']) return 1;
+		if(a['value']>b['value']) return -1;
+		return 0;  
+	}
+
 })(jQuery);
\ No newline at end of file