boxplot.js

var min = Infinity,
	max = -Infinity;
var period1,Time1 ,provinceId1,keyBusinessId1;
function svgVirBarChart(period,Time,provinceId,keyBusinessId,keyLinkId,minValue) {
	var all = period +"&"+ Time +"&"+ provinceId +"&"+ keyBusinessId +"&"+ keyLinkId + "&" +minValue;
	period1 = period;Time1 = Time; provinceId1= provinceId; keyBusinessId1 = keyBusinessId;
	/////////每个箱体的属性
	var labels = false; // show the text labels beside individual boxplots?
    var margin = {top: 40, right: 40, bottom: 70, left: 40};
    var width =560 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
    var min1 = Infinity,
    max1 = -Infinity;
    $.ajax({
				type : "get",
				contentType : 'application/json',
				url : '../MonitorOperation/KeyLinkProcessAnalysis/boxplot/'+all+'/'+Date.parse(new Date()),
				dataType : 'text',
				beforeSend : function(data) {},
				success : function(data) {
					data=data.replace(/\"/gi,"'");
					data = eval("(" + data + ")");
					 if(data == "" || data == null){
					    	$("#boxplot").html("<img style='height:450px;margin:0 auto;' src='../static/images/nodatamessage2.png'>");
					    	$("#circleDiv").html("<img style='height:450px;margin:0 auto;' src='../static/images/nodatamessage2.png'>");
					 }else{
					var boxplotData = data[0];
					var circleData = data[1];
					var data1 = [];
					var boxplotcircleData = [];
					var j=0;
					var e = null;
						for ( var i = 0; i < boxplotData.length; i++) {
						       e = boxplotData[i]; // X轴的数据
						      // e = test.split(",");
						       data1[j] = [];
						       data1[j][0] = e[0];
						       for(var t =1;t<e.length;t++){
						    	   if(data1[j][1] == "" || data1[j][1] == null){
						    		   data1[j][1]=[e[t]];
						    	   }else{
						    		   data1[j][1].push(e[t]);
						    	   }
						    	   s = Math.ceil(e[t]); // y轴的数据
						    	   if (s > max)
										max = s;
									if (s < min)
										min = s;
						       }
						       j++;
						}
						boxplotcircleData = data1;
						
						var chart = d3.box()
						.whiskers(iqr(1.5))
						.height(height)
						.domain([min-1, max*1.1])
						.showLabels(labels);
						
						var svg = d3.select("div#boxplot").append("svg")
						.attr("width", width +margin.left )
						.attr("height", height + margin.top + margin.bottom+80)
						.attr("class", "box")    
						.append("g")
						.attr("transform", "translate(" + (margin.left+15) + "," + margin.top + ")");
						
						// the x-axis
						var x = d3.scale.ordinal()	   
							.domain( data1.map(function(d) { return d[0]; } ) )	    
							.rangeRoundBands([0 , width], 0.7, 0.3); 		

						var xAxis = d3.svg.axis().scale(x)
							.orient("bottom").outerTickSize(0);

						// the y-axis
						var y = d3.scale.linear()
							.domain([min-1, max*1.1])
							.range([height+margin.top, 0+margin.top]);
						
						var yAxis = d3.svg.axis().scale(y)
					    	.orient("left").outerTickSize(0);
					
						  // draw y axis
						  svg.append("g").attr("class","y axis").call(yAxis);
					  
						  svg.select(".y.axis")
				         .selectAll("path").attr({
								"fill": "none",
								"stroke": "black",
								"stroke-width": "1",
								"shape-rendering": "crispEdges",
								"opacity":"0.8"
							});
					
					  svg.select(".y.axis")
			           .selectAll("line").attr({
							"fill": "none",
							"stroke": "black",
							"stroke-width": "1",
							"shape-rendering": "crispEdges",
							"opacity":"0.8"
						});
						
					  svg.select(".y.axis")
				           .selectAll("text").attr({
				        	   "font-family":"Microsoft YaHei",
					        	"fill": "black",
								"opacity":"1"
							});
						// draw x axis	
					  svg.append("g").attr("class","x axis")
				      .attr("transform", "translate(0," + (height  + margin.top) + ")")
				      .call(xAxis);
				  
					  svg.select(".x.axis")
			         .selectAll("path").attr({
							"fill": "none",
							"stroke": "black",
							"stroke-width": "1",
							"shape-rendering": "crispEdges",
							"opacity":"0.8"
						});
				
				  svg.select(".x.axis")
		           .selectAll("line").attr({
						"fill": "none",
						"stroke": "black",
						"stroke-width": "1",
						"shape-rendering": "crispEdges",
						"opacity":"0.8"
					});
				
				  
				  svg.select(".x.axis")
					        .call(xAxis)
					        .selectAll("text").attr({
						    	  "font-family":"Microsoft YaHei",
						        	"fill": "black",
						  			"opacity":"1"
						  		})    
				            .style("text-anchor", "end")
				            .attr("dx", "-.8em")
				            .attr("dy", ".15em")
				            .attr("transform", function(d) {
				            return "translate(-5,0) rotate(-90)" ;})
				            .style('cursor','pointer')
				            .on('click',function (d){
								 dialog_artDialog(d+"各时段箱体图",
										 "<div style='width:1400px;text-align:center;'>" +
										 " <div name='loading' class='loading' style='position:relative;height:630px;width:1350px;'><img src='../static/images/loading.gif'/></div>"+
										 "<div class='col-xs-6'><div id='boxplot1'></div></div> "+
										 "<div class='col-xs-6'>" +
										 "<span id='TimeFrameUpper3'><label for=''>下限</label><input class='slide-menu-select' type='text' id='up3' value='' size='2'/><select class='slide-menu-select' id='TimeUpper3'><option value='s'>秒</option><option value='m'>分</option></select></span><span id='TimeFrameLower3'><label for=''>上限</label><input class='slide-menu-select' type='text' id='down3' value='' size='2'/><select class='slide-menu-select' id='TimeLower3'><option value='s'>秒</option>	<option value='m'>分</option></select></span><button type='button' class='btn btn-primary' onclick='boxDetailCircleSubmit()'>筛选</button>" +
										 "<div id='boxplotDetailCircle'></div></div>" +
										 "</div> "
										 ,"1450px","700px");
								 $('#boxplot1').parent().parent().find('.loading').fadeIn("fast"); //出现loading图片
								 svgVirBarChart1(period,Time,provinceId,keyBusinessId,d,minValue);  /*boxplotDetail.js*/
							});
			            
			            if(data1 == "" || data1 == null){
							  svg.append("text")             // text label for the x axis
						       	 .attr("x", (width/2)  )
						         .attr("y",  (height/2) )
							     .attr("dy", ".71em")
						         .style("text-anchor", "end")
							     .style("font-size", "16px") 
						         .text("暂无数据"); 
						  }else{
							var tip = d3.tip()
							      .attr('class', 'd3-tip')
							      .offset([-10, 0])
							      .html(function(d) {
							    	  return "<span style='background-color: #a1d8f7;padding:3px 3px 3px 3px;border-style:solid;border-width:1px; border-color:#a1d8f7;border-radius: 3px;'>最大值："+d[1][4]+"中位线：" + d[1][2] + ",第一四分位："+d[1][1]+",第三四分位："+d[1][3]+"最小值："+d[1][0]+"</span>";
							      });
							  svg.call(tip);
							
							  var color = d3.scale.category20();
							
							  // draw the boxplots	
							  svg.selectAll(".box")	   
						         .data(data1)
							     .enter().append("g")
							     .attr("transform", function(d) { return "translate(" +  x(d[0])  + ","+margin.top+")"; } )
							     .attr("fill",function(d,i){return color(i);})
						         .call(chart.width(x.rangeBand())) 
						         .on('mouseover', tip.show)
						         .on('mouseout', tip.hide); 
							  
					 }
			        /*    var circledata1=[];
			            var circleMapData = [];*/
						var l=0,q=0;
						min1 = min; max1= max;
						 for(var i = 0;i<circleData.length;i++){
				            	var e = circleData[i];
				            	/*circleMapData[q] =  e[0];
					            	circledata1[l]=[];
					            	circledata1[l][0] = e[0];*/
					            	if(e.length > 1){
					            	for(var t = 1; t < e.length; t=t+2){
					            		  if(boxplotcircleData[l][2] == "" ||boxplotcircleData[l][2]== null){
								    		 /*  circledata1[l][1]=[e[t]];
								    		   circledata1[l][2]=[e[t+1]];*/
								    		   boxplotcircleData[l][2]=[e[t]];
								    	   }else{
								    		   /*circledata1[l][1].push(e[t]);
								    		   circledata1[l][2].push(e[t+1]);*/
								    		   boxplotcircleData[l][2].push(e[t]);
								    	   }
					            		  s = Math.ceil(e[t]); // y轴的数据
								    	   if (s > max1)
												max1 = s;
											if (s < min1)
												min1 = s;
					            		  boxplotcircleData[l][1].push(e[t+1]);
					            	  }
					            	}
					            	l++;
				            	
								q++;
				            }
						 outlierData = [min1];
						 outlierData.push(max1);
						 outlierData.push(boxplotcircleData);
						// console.log("allBoxCircleData:"+allBoxCircleData);
					   // outlierData = [circledata1];
					   // outlierData.push(circleMapData);
					   // circleTest(outlierData,period,Time,provinceId,keyBusinessId);
					    
					    boxplotCircleTest(outlierData);
						  }
					 $('#circleDiv').parent().parent().find('.loading').fadeOut("fast");//隐藏loading图片
				}
			});
   
}



// Returns a function to compute the interquartile range.
function iqr(k) {
	return function(t, i) {
		// alert("t:"+t); ///打印出来的就是expt不同值里面对应的数据
		var q1 = t[1], q3 = t[3], iqr = (q3 - q1) * k, i = -1, j = t.length;

		while (t[++i] < q1 - iqr);		
		while (t[--j] > q3 + iqr);
		//alert(i);
		return [ i, j ];
		
	};
}


function boxplotCircleTest(boxplotcircleData){
	var min2 = boxplotcircleData[0];
	var max2 = boxplotcircleData[1];
	data1 =	deepcopy(boxplotcircleData[2]);
	for(var j = 0; j<data1.length;j++){
		var lowtime = getTimeUpperValue().valueOf();   //加入工单异常处理时长的限制
		var uptime = getTimeLowerValue().valueOf();
		if(lowtime == 0 && uptime == 0){}else{
			if(uptime != "" && uptime != null){
				//if(uptime>max){    //调整最大值和最小值
					max2 = uptime;
				/*}else{
					max2 = max;
				}*/
			}
			if(uptime != "" && uptime != null){
				//if(lowtime < min){
					min2 = lowtime;
				/*}else{
					min2 = min;
				}*/
			}
			
			for(var r = 5 ;r <data1[j][1].length ; r++){
				var tt = parseFloat(data1[j][2][r-5]);
				if(tt > uptime || tt < lowtime){
					data1[j][1].splice(r,1);
					data1[j][2].splice(r-5,1);
					r--;
				}
				
			}
		}
		
	}
	var labels = false; // show the text labels beside individual boxplots?
    var margin = {top: 10, right: 40, bottom: 70, left: 40};
    var width =560 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
    
	var chart = d3.box1()
	.whiskers(iqr(1.5))
	.height(height)
	.domain([min2-1, max2*1.1])
	.showLabels(labels);
	
	$("#circleDiv").html("");
	var svg = d3.select("div#circleDiv").append("svg")
	.attr("width", width + margin.left+10)
	.attr("height", height + margin.top + margin.bottom+60)
	.attr("class", "box")    
	.append("g")
	.attr("transform", "translate(" + (margin.left+10) + "," + margin.top + ")");
	
	// the x-axis
	var x = d3.scale.ordinal()	   
		.domain( data1.map(function(d) { return d[0]; } ) )	    
		.rangeRoundBands([0 , width], 0.7, 0.3); 		

	var xAxis = d3.svg.axis()
		.scale(x)
		.orient("bottom").outerTickSize(0);

	// the y-axis
	var y = d3.scale.linear()
		.domain([min2-1, max2*1.1])
		.range([height+margin.top, 0+margin.top]);
	
	var yAxis = d3.svg.axis()
    	.scale(y)
    	.orient("left").outerTickSize(0);

	  // draw y axis
	  svg.append("g").attr("class","y axis")
      .call(yAxis);
  
	  svg.select(".y.axis")
     .selectAll("path").attr({
			"fill": "none",
			"stroke": "black",
			"stroke-width": "1",
			"shape-rendering": "crispEdges",
			"opacity":"0.8"
		});

  svg.select(".y.axis")
   .selectAll("line").attr({
		"fill": "none",
		"stroke": "black",
		"stroke-width": "1",
		"shape-rendering": "crispEdges",
		"opacity":"0.8"
	});
	
  svg.select(".y.axis")
       .selectAll("text").attr({
    	   "font-family":"Microsoft YaHei",
        	"fill": "black",
			"opacity":"1"
		});
	// draw x axis	
  svg.append("g").attr("class","x axis")
  .attr("transform", "translate(0," + (height  + margin.top) + ")")
  .call(xAxis);

  svg.select(".x.axis")
 .selectAll("path").attr({
		"fill": "none",
		"stroke": "black",
		"stroke-width": "1",
		"shape-rendering": "crispEdges",
		"opacity":"0.8"
	});

svg.select(".x.axis")
.selectAll("line").attr({
	"fill": "none",
	"stroke": "black",
	"stroke-width": "1",
	"shape-rendering": "crispEdges",
	"opacity":"0.8"
});


svg.select(".x.axis")
        .call(xAxis)
        .selectAll("text").attr({
	    	  "font-family":"Microsoft YaHei",
	        	"fill": "black",
	  			"opacity":"1"
	  		})    
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function(d) {
        return "translate(-5,0) rotate(-90)" ;});
        
    
    if(data1 == "" || data1 == null){
		  svg.append("text")             // text label for the x axis
	       	 .attr("x", (width/2)  )
	         .attr("y",  (height/2) )
		     .attr("dy", ".71em")
	         .style("text-anchor", "end")
		     .style("font-size", "16px") 
	         .text("暂无数据"); 
	  }else{
		
		  var color = d3.scale.category20();
		
		  // draw the boxplots	
		  svg.selectAll(".box")	   
	         .data(data1)
		     .enter().append("g")
		     .attr("transform", function(d) { return "translate(" +  x(d[0])  + ","+margin.top+")"; } )
		     .attr("fill",function(d,i){return color(i);})
	         .call(chart.width(x.rangeBand()));
 }
}

//克隆多维数组
function deepcopy(obj) {
    var out = [],i = 0,len = obj.length;
    for (; i < len; i++) {
        if (obj[i] instanceof Array){
            out[i] = deepcopy(obj[i]);
        }
        else out[i] = obj[i];
    }
    return out;
}

/*function circleTest(circleData,period,Time,provinceId,keyBusinessId) {
	   var a=[], a1=[];
	    var id = 1;
	    var circledata1 = circleData[0];
	    var circledata2 = circleData[1];
	    for(var t=0;t<circledata1.length;t++){
	    	   var data2 = circledata1[t][1];
	    	   var data3 = circledata1[t][2];
	    	   if(data2 == "" || data2 == null){
	    		   id--;
	    	   }else{
	   	    	var lowtime = getTimeUpperValue().valueOf();   //加入工单异常处理时长的限制
				var uptime = getTimeLowerValue().valueOf();
				if(lowtime == 0 && uptime == 0){
					id = circledata1.length;
					for(var r = 0 ;r <data2.length ; r++){
						var b = [circledata1[t][0]], b1 = [circledata1[t][0]];
						b.push(data2[r]); 
						b1.push(data3[r]);
						a.push(b);
				    	a1.push(b1);
					}
				}else{
					for(var r = 0 ;r <data2.length ; r++){
						data2[r] = parseFloat(data2[r]);
						if(data2[r] < uptime && lowtime <= data2[r]){
							if(a.length != 0 && a[a.length-1][0] != circledata1[t][0]){
								id++;
							}
							var b = [circledata1[t][0]], b1 = [circledata1[t][0]];
							b.push(data2[r]); 
							b1.push(data3[r]);
							a.push(b);
					    	a1.push(b1);
						}
						
					}
				}
	    	   }

		}
	    var margin = {top: 30, right: 50, bottom: 70, left: 50};
		   var  width =550 - margin.left - margin.right;
		   var height = 400 - margin.top - margin.bottom;
		   	var padding = 20;
		
		   	$("#circleDiv").html(""); 
	  var svg = d3.select("div#circleDiv").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom+60)
			.attr("class", "box")    
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
	  var x = d3.scale.ordinal()	   
	       .domain( circledata2.map(function(d) { return d; } ) )	    
	       .rangeRoundBands([0 ,width-padding]); 		

	  var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom").outerTickSize(0);
	  
		// the y-axis
	  var y = d3.scale.linear()
			.domain([d3.min(a1,function (d){return parseFloat(d[1]);})-1, parseInt(d3.max(a1,function (d){return parseFloat(d[1]);})*1.1)])
			.range([height , 0]);

	  var yAxis = d3.svg.axis()
	        .scale(y)
	        .orient("left").outerTickSize(0);

	  // draw y axis
	  svg.append("g").attr("class","y1 axis")
      .call(yAxis);
  
	  svg.select(".y1.axis")
     .selectAll("path").attr({
			"fill": "none",
			"stroke": "black",
			"stroke-width": "1",
			"shape-rendering": "crispEdges",
			"opacity":"0.8"
		});

  svg.select(".y1.axis")
   .selectAll("line").attr({
		"fill": "none",
		"stroke": "black",
		"stroke-width": "1",
		"shape-rendering": "crispEdges",
		"opacity":"0.8"
	});
	
  d3.select(".y1.axis")
       .selectAll("text").attr({
    	   "font-family":"Microsoft YaHei",
        	"fill": "black",
			"opacity":"1"
		});
		
		// draw x axis
	  svg.append("g").attr("class","x1 axis")
		 .attr("transform", "translate(0," + (height) + ")")
		 .call(xAxis);
	  
	  svg.select(".x1.axis")
	     .selectAll("path").attr({
				"fill": "none",
				"stroke": "black",
				"stroke-width": "1",
				"shape-rendering": "crispEdges",
				"opacity":"0.8"
			});

	  svg.select(".x1.axis")
	   .selectAll("line").attr({
			"fill": "none",
			"stroke": "black",
			"stroke-width": "1",
			"shape-rendering": "crispEdges",
			"opacity":"0.8"
		});
	  
	  svg.select(".x1.axis").selectAll("text").attr({
	    	  "font-family":"Microsoft YaHei",
	        	"fill": "black",
	        	"stroke-width": "0.3",
	  			"opacity":"1"
	  		})    
		  .style("text-anchor", "end")
		  .attr("dx", "-.8em")
		  .attr("dy", ".15em")
		  .attr("transform", function(d) {
			   return "translate(-5,0) rotate(-90)" ;});
	  
	  console.log("id:"+id);
	
	  if(a == "" || a == null){
		  svg .append("text")             // text label for the x axis
	       .attr("x", (width/2)  )
	       .attr("y",  (height/2) )
		   .attr("dy", ".71em")
	       .style("text-anchor", "end")
		   .style("font-size", "16px") 
	       .text("暂无数据"); 
	  }else{
		  svg.selectAll("circle")
		  .data(a1)
		  .enter()
		  .append("circle")
		  .attr("cx", function (d,i) { return x(d[0]); } )
		  .attr("cy", function(d,i) {
		       return y(d[1]);
		    })
		  .attr("r", 3).attr("fill","green")
		  .attr("transform", "translate("+(width-padding)/(circledata2.length*2)+",0)");
		  svg.selectAll("circle").data(a).on("mouseover", function(d) {
	            d3.select(this).attr("r", 6);
	             d3.select(this).append("svg:title")
	          .text(function(d) { return  d[0]+":"+d[1]; });
	          }).on("mouseout",function() {
	            d3.select(this).attr("r", 3);
	          });
		  
		  //钻取明细
			svg.selectAll("circle").data(a).style('cursor','pointer').on('click', function (d){
				  dialog_artDialog("异常点明细","<div id='circleDetail'><table id='circleTable' class='table table-hover table-striped' style='text-align:center;'></div>","1000px","500px");
					 var all = period+"&"+Time+"&"+provinceId +"&"+keyBusinessId +"&"+d;
					  circleDetailChart(all);
		    });
	   }

}*/