OXIESEC PANEL
- Current Dir:
/
/
home
/
cubot
/
docroot
/
showcase
/
js
/
D3
/
plugins
Server IP: 139.59.38.164
Upload:
Create Dir:
Name
Size
Modified
Perms
📁
..
-
08/14/2022 11:05:22 AM
rwxr-xr-x
📄
Radar.js
8.86 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
bar.js
17.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.css
422 bytes
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.js
10.65 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
calendar.js
16.63 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
calender.css
541 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo.js
16.74 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo_2.js
17.91 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
combo_wip.js
16.61 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
commonFunc.js
25.28 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
customChart.js
577 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
d3Charts.css
2.88 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
donut.js
5.67 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
filledAreaPercent.js
17.95 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
funnel.js
6.03 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
funnel.js_previous_o4aug17
5.86 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
gauged.js
15.3 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
groupbar.js
13.18 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
groupbar_23Aug2019.js
10.85 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
heatmap.js
9.77 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
html2canvas.min.js
161.47 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJson.js
1.64 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJsonmulti.js
3.75 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
multiLine.js
17.24 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
multipleDonut.js
5.29 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
pie.js
4.52 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
radar.js
6.49 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
saveSvgAsPng.js
14.62 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
stackedAreaDate.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedAreaDate_bkup23Nov2020.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar_bkup21Apr2020.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stock.js
13.6 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
sun.js
7.59 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
sunburst.js
7.13 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tableChart.js
11.54 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
tableChart_07Jan2020.js
6.7 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tree.js
7.34 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
waterfall.js
9.17 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
zoomTree.js
7.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
Editing: bar.js
Close
function drawBarChart_interactive(Data, divId, Title, Width, Height, Ndim, Nmeas, MeasFormats, Dimensions, Measures, dispObj){ var margin = {top: 20, right: 40, bottom: 20, left: 50}, width, height, measNum = 1, json=makeJsonFromArrayNew(Data, Ndim, Nmeas, MeasFormats, dispObj); resolveComputeMeasure(json, dispObj.RD.General.Measures); d3.select("#"+divId).html('<div class="myChart"><div class="svgLegend"></div><div class="tipsy"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div></div>'); d3.selectAll(".tipsy").style("display", "none"); var svg = findSvgArea(Nmeas,dispObj,json, Width, Height, divId); height = svg[2] - margin.top - 30; width = dispObj.getMultiAxes() ? svg[3]- margin.left - margin.right : svg[3] - margin.left - 30; svg[0].attr("transform", "translate(" + margin.left + "," + (margin.top+20) + ")"); var y = height/(json.children.length+4),//bar height x = d3.scale.linear() .range([0, width]), z = d3.scale.ordinal() .range([dispObj.colorArr[measNum-1], "#ccc"]), // bar color k = new Array(Nmeas); for(i=0;i<Nmeas;i++) k[i]=0; var hierarchy = d3.layout.partition() .value(function(d) { return d.size[measNum-1]; }); k[measNum-1]=1; //Default measNum highlighted var xAxis = d3.svg.axis() .scale(x) .orient("top") .tickFormat( function(d) { return formatSmallScale(d, MeasFormats[measNum-1]) }); svg[0].append("rect") .attr("class", "background") .attr("width", width) .attr("height", height) .style("stroke",function(){ return dispObj.getdrawBorder() ? "#DDDDDD" : "none";}) .on("click", function(d){up(divId, svg, d, 0, xAxis, x, z,json,measNum,k, dispObj, MeasFormats)}); svg[0].append("g") .attr("class", "x axis"); svg[0].append("g") .attr("class", "y axis") .append("line") .attr("y1", height); hierarchy.nodes(json); //descending order var cnc = json.children; // var miny=0, maxy=d3.max(cnc, function(d) { return Math.max(d.value);}); var miny=d3.min(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(Math.min(d.size[i])<s) s = Math.min(d.size[i]); return s; }); var maxy=d3.max(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(Math.max(d.size[i])>s) s = Math.max(d.size[i]); return s; }); //maxy=300; var nTicks =Math.max(Math.floor(width/50),2); var minMax=getNewMinMax(miny, maxy, nTicks); x.domain(minMax); down(divId, svg, json, 0, xAxis, x, z,json,measNum,k, dispObj, MeasFormats); if(dispObj.getShowLegend()) makeLegend(svg,Nmeas,measNum,"",clickHorRect,json,k,1, dispObj); svg[1].selectAll("rect").attr("fill-opacity",0.3); svg[1].select("rect").attr("fill-opacity",1); //first displayed measure is highlighted. //} function down(divId, svg, d, i, xAxis, x, z,json,measNum,k, dispObj, MeasFormats) { var duration = 750, delay = 25; if (!d.children || this.__transition__) return; var cnc = d.children; if (d.children.length > height/15) d.children = d.children.slice(0,Math.ceil(height/15)); var end = duration + d.children.length * delay; // Mark any currently-displayed bars as exiting. var exit = svg[0].selectAll(".enter").attr("class", "exit"); // Entering nodes immediately obscure the clicked-on bar, so hide it. exit.selectAll("rect").filter(function(p) { return p === d; }) .style("fill-opacity", 1e-6); // Enter the new bars for the clicked-on data. // Per above, entering bars are immediately visible. y = Math.min(height/(d.children.length+3),30); var enter = bar(divId, d, svg, xAxis, x, y, z,measNum,dispObj, MeasFormats) .attr("transform", stack(i,x,y,measNum)) .style("opacity", 1); // Have the text fade-in, even though the bars are visible. // Color the bars as parents; they will fade to children if appropriate. enter.select("rect").style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); }) var nTicks =Math.max(Math.floor(width/50),2); //var miny=0, maxy=x.domain()[1]; //var miny=0, maxy=d3.max(d.children, function(d) { return Math.max(d.value);}); var miny=d3.min(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(k[i]) if(Math.min(d.size[i])<s) s = Math.min(d.size[i]); return s; }); var maxy=d3.max(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(k[i]) if(Math.max(d.size[i])>s) s = Math.max(d.size[i]); return s; }); var minMax=getNewMinMax(miny, maxy, nTicks); var tv=getTickValues(miny, maxy, nTicks); // Update the x-scale domain. x.domain(minMax); // Update the x-axis. svg[0].selectAll(".x.axis").transition() .duration(duration) .call(xAxis.tickValues(tv)); if(!(dispObj.getShowGridLines() && dispObj.getShowTicks())){ svg[0].select(".y.axis").selectAll("line").style("visibility","hidden"); svg[0].select(".x.axis").selectAll("path").style("visibility","hidden"); } if(!dispObj.getShowTicks()){ svg[0].select(".enter").selectAll("text").remove(); svg[0].select(".x.axis").selectAll(".tick").remove(); } if(!dispObj.getShowTickLabels()){ svg[0].select(".enter").selectAll("text").remove(); svg[0].select(".x.axis").selectAll("text").remove(); } var xPosition='S'; if(dispObj.RD && dispObj.RD.Axes && dispObj.RD.Axes.xPos) xPosition=dispObj.RD.Axes.xPos; svg[0].selectAll(".enter").selectAll("text").text(function(d){ d = d.name.replace("'","'"); if(dispObj.getxFrom() == "all") return d; else if(dispObj.getxFrom() == "first") return d.substr(0,dispObj.getxLength()); else return d.substr(d.length - Math.min(dispObj.getxLength(),d.length),d.length); }) .attr("transform", function() { return xPosition=="A" ? "rotate("+(-20)+")translate(-8,-8)" : "rotate(0)";}) svg[0].select(".enter").selectAll("text").call(wrap, margin.left).append("title").text(function (d){return d.name.replace("'","'");}); // Transition entering bars to their new position. var enterTransition = enter.transition() .duration(duration) .delay(function(d, i) { return i * delay; }) .attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; }); // Transition entering text. enterTransition.select("text").style("fill-opacity", 1); // Transition entering rects to the new x-scale. enterTransition.select("rect") .attr("width", function(d) { return Math.abs(x(d.size[measNum-1]) - x(0)); }) .style("fill", function(d) { return d.value>0?z(!!d.children):(d.children?"#A52A2A":"#D69494"); }); // Transition exiting bars to fade out. var exitTransition = exit.transition() .duration(duration) .style("opacity", 1e-6) .remove(); // Transition exiting bars to the new x-scale. exitTransition.selectAll("rect") .attr("width", function(d) { return Math.abs(x(d.size[measNum-1]) - x(0)); }) // Rebind the current node to the background. svg[0].select(".background").data([d]).transition().duration(end); d.index = i; svg[0].selectAll(".limit-line").remove(); var spcValues = dispObj.getThreshold() if(spcValues.spcLines=="true" && !dispObj.getMultiAxes()){ var upper_limit_value = getResolvedThresholdValue(spcValues.upperValue); var lower_limit_value = getResolvedThresholdValue(spcValues.lowerValue); var upper_stroke_value = (spcValues.upperLine != "dash") ? "0,0" : "3,3"; var lower_stroke_value = (spcValues.lowerLine != "dash") ? "0,0" : "3,3"; var upperColor = (spcValues.upperColor == "#") ? "black" : spcValues.upperColor; var lowerColor = (spcValues.lowerColor == "#") ? "black" : spcValues.lowerColor; svg[0].append("line").attr("class", "limit-line").style("stroke-dasharray",upper_stroke_value).style("stroke",upperColor).attr({ y1: 0, x1: x(upper_limit_value), y2: height, x2: x(upper_limit_value) }) svg[0].append("text").attr("class","limit-line").attr("transform","translate("+(x(upper_limit_value)-5)+","+(height - (spcValues.upperLabel.length)+10)+")rotate(-90)").text(spcValues.upperLabel); svg[0].append("line").attr("class", "limit-line").style("stroke-dasharray",lower_stroke_value).style("stroke",lowerColor).attr({ y1: 0, x1: x(lower_limit_value), y2: height, x2: x(lower_limit_value) }) svg[0].append("text").attr("class","limit-line").attr("transform","translate("+(x(lower_limit_value)-5)+","+(height - (spcValues.lowerLabel.length)+10)+")rotate(-90)").text(spcValues.lowerLabel); } } function up(divId, svg, d, i, xAxis, x, z,json,measNum,k, dispObj, MeasFormats) { var duration = 750, delay = 25; if (!d.parent || this.__transition__) return; var end = duration + d.children.length * delay; // Mark any currently-displayed bars as exiting. var exit = svg[0].selectAll(".enter").attr("class", "exit"); // Enter the new bars for the clicked-on data's parent. y = Math.min((height/(d.parent.children.length+3)),30); var enter = bar(divId, d.parent, svg, xAxis, x, y, z,measNum,dispObj, MeasFormats) .attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; }) .style("opacity", 1e-6); // Color the bars as appropriate. // Exiting nodes will obscure the parent bar, so hide it. enter.select("rect") .style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); }) .filter(function(p) { return p === d; }) .style("fill-opacity", 1e-6); var nTicks =Math.max(Math.floor(width/50),2); //var miny=0, maxy=x.domain()[1]; //var miny=0, maxy=d3.max(d.parent.children, function(d) { return Math.max(d.value);}); var cnc=d.parent.children; var miny=d3.min(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(k[i]) if(Math.min(d.size[i])<s) s = Math.min(d.size[i]); return s; }); var maxy=d3.max(cnc, function(d) { var s=0; for(i=0;i<Nmeas;i++) if(k[i]) if(Math.max(d.size[i])>s) s = Math.max(d.size[i]); return s; }); var minMax=getNewMinMax(miny, maxy, nTicks); var tv=getTickValues(miny, maxy, nTicks); // Update the x-scale domain. x.domain(minMax); // Update the x-axis. svg[0].selectAll(".x.axis").transition() .duration(duration) .call(xAxis.ticks(Math.floor(width/50)) .tickValues(tv)); //dispobj functions if(dispObj.getShowGridLines() && dispObj.getShowTicks()){ svg[0].select(".y.axis").selectAll("line").style("stroke","#DDDDDD"); svg[0].select(".x.axis").select("path").style("stroke","#DDDDDD"); } else{ svg[0].select(".y.axis").selectAll("line").style("visibility","hidden"); svg[0].select(".x.axis").selectAll("path").style("visibility","hidden"); } if(!dispObj.getShowTicks()){ svg[0].select(".enter").selectAll("text").remove(); svg[0].select(".x.axis").selectAll(".tick").remove(); } if(!dispObj.getShowTickLabels()){ svg[0].select(".enter").selectAll("text").remove(); svg[0].select(".x.axis").selectAll("text").remove(); } var xPosition='S'; if(dispObj.RD && dispObj.RD.Axes && dispObj.RD.Axes.xPos) xPosition=dispObj.RD.Axes.xPos; svg[0].selectAll(".enter").selectAll("text").text(function(d){ d = d.name.replace("'","'"); if(dispObj.getxFrom() == "all") return d; else if(dispObj.getxFrom() == "first") return d.substr(0,dispObj.getxLength()); else return d.substr(d.length - Math.min(dispObj.getxLength(),d.length),d.length); }) .attr("transform", function() { return xPosition=="A" ? "rotate("+(-20)+")translate(-5,-5)" : "rotate(0)";}) // Transition entering bars to fade in over the full duration. var enterTransition = enter.transition() .duration(end) .style("opacity", 1); // Transition entering rects to the new x-scale. // When the entering parent rect is done, make it visible! enterTransition.select("rect") .attr("width", function(d) { return Math.abs(x(d.size[measNum-1]) - x(0)); }) .each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); }); // Transition exiting bars to the parent's position. var exitTransition = exit.selectAll("g").transition() .duration(duration) .delay(function(d, i) { return i * delay; }) .attr("transform", stack(d.index,x, y, measNum)); // Transition exiting text to fade out. exitTransition.select("text") .style("fill-opacity", 1e-6) // Transition exiting rects to the new scale and fade to parent color. exitTransition.select("rect") .attr("width", function(d) { return Math.abs(x(d.size[measNum-1]) - x(0)); }) .style("fill", function(d) { return d.value > 0 ? z(!!d.children) : (d.children?"#A52A2A":"#D69494"); }) // Remove exiting nodes when the last child has finished transitioning. exit.transition().duration(end).remove(); // Rebind the current parent to the background. svg[0].select(".background").data([d.parent]).transition().duration(end); svg[0].selectAll(".limit-line").remove();; var spcValues = dispObj.getThreshold() if(spcValues.spcLines=="true" && !dispObj.getMultiAxes()){ var upper_limit_value = spcValues.upperValue; var lower_limit_value = spcValues.lowerValue; var upper_stroke_value = (spcValues.upperLine != "dash") ? "0,0" : "3,3"; var lower_stroke_value = (spcValues.lowerLine != "dash") ? "0,0" : "3,3"; var upperColor = (spcValues.upperColor == "#") ? "black" : spcValues.upperColor; var lowerColor = (spcValues.lowerColor == "#") ? "black" : spcValues.lowerColor; svg[0].append("line").attr("class", "limit-line").style("stroke-dasharray",upper_stroke_value).style("stroke",upperColor).attr({ y1: 0, x1: x(upper_limit_value), y2: height, x2: x(upper_limit_value) }) svg[0].append("text").attr("class","limit-line").attr("transform","translate("+(x(upper_limit_value)-5)+","+(height - (spcValues.upperLabel.length)+10)+")rotate(-90)").text(spcValues.upperLabel); svg[0].append("line").attr("class", "limit-line").style("stroke-dasharray",lower_stroke_value).style("stroke",lowerColor).attr({ y1: 0, x1: x(lower_limit_value), y2: height, x2: x(lower_limit_value) }) svg[0].append("text").attr("class","limit-line").attr("transform","translate("+(x(lower_limit_value)-5)+","+(height - (spcValues.lowerLabel.length)+10)+")rotate(-90)").text(spcValues.lowerLabel); } } // Creates a set of bars for the given data node, at the specified index. function bar(divId, d, svg, xAxis, x, y, z, measNum, dispObj, MeasFormats) { //var newwidth = (dispObj.getxFrom() == "all" && dispObj.getShowTicks() && dispObj.getShowTickLabels()) ? 6*d.children[0].name.length : 6*dispObj.getxLength(); //x.range([newwidth,width]); if(dispObj.getShowTicks()&&dispObj.getShowTickLabels()){ var name; var max = d.children[0].name.length for(i=0;i<d.children.length;i++){ if(d.children[i].name.length > max){ max = d.children[i].name.length; name = d.children[i].name } } var newwidth = max*2; }else var newwidth = 0; x.range([newwidth,width]); var bar = svg[0].insert("g", ".y.axis") .attr("class", "enter") .attr("transform", "translate("+x(0)+",5)") .selectAll("g") .data(d.children) .enter().append("g") .style("cursor", function(d) { return !d.children ? null : "pointer"; }) .on("click", function(d,i){down(divId, svg,d,i, xAxis, x, z,json,measNum,k, dispObj, MeasFormats)}); bar.append("text") .attr("x", -6) .attr("y", y / 2) .attr("dy", ".35em") .attr("text-anchor", "end") .text(function(d) { return d.name.replace("'","'"); }); bar.append("rect") .attr("width", function(d) { return Math.abs(x(d.size[measNum-1]) - x(0)); }) .attr("height", y) .on("mouseover", function(d,i){showToolTips(divId, d, measNum,MeasFormats)}) .on("mouseout", function(d,i){hideToolTip(divId, d,i)}); svg[0].selectAll(".xlabel").remove(); svg[0].selectAll(".ylabel").remove(); svg[0].selectAll(".limit-line").remove(); if(dispObj.getShowLabel()){ svg[0].append("g").attr("class","ylabel") .append("text").text(d.children[0].dimName) .attr("transform", "translate(" + (-34) + "," + height/2 + ")rotate(-90)") .style("text-anchor", "middle") .attr("class", "label"); svg[0].append("g").attr("class","xlabel") .append("text") .text(d.measName[measNum-1]) .attr("transform", "translate(" + (x(0)+(width-newwidth)/2) + "," + -25 + ")") .style("text-anchor", "middle") .attr("class", "label"); } svg[0].selectAll(".y.axis").select("line").attr("transform","translate("+x(0)+",0)"); svg[0].select("rect").attr("transform","translate("+x(0)+",0)").attr("width",width-newwidth); updateLegendll(divId, svg, d, i, xAxis, x, z, json, measNum, k ,clickHorBar, dispObj, MeasFormats); return bar; } function clickHorBar(divId, d,i, svg, ic, xAxis, x, z,json,measNum,k,c, dispObj, MeasFormats){ down(divId, svg,d,ic, xAxis, x, z,json,measNum,k, dispObj, MeasFormats) } function clickHorRect(ele,k,svg,n){ measNum = +ele.id+1; for(var j=0;j<n;j++) k[j]=0; k[+ele.id]=1; //clicked rect highlighted svg[1].selectAll("rect").attr("fill-opacity",0.3);//others dimmed z.range([dispObj.colorArr[measNum-1], "#ccc"]); hierarchy=d3.layout.partition().value(function(d) { return d.size[measNum-1]; }); hierarchy(json); down(divId, svg,json,i, xAxis, x, z,json,measNum,k, dispObj, MeasFormats); } // A stateful closure for stacking bars horizontally. function stack(i, x, y, measNum) { var x0 = 0; return function(d) { var tx = "translate(" + x0 + "," + y * i * 1.2 + ")"; x0 += x(d.size[measNum-1]); return tx; }; } }//added