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: calendar.js
Close
function drawCalendar(Data, divId, Title, Width, Height, Ndim, Nmeas,MeasFormats,dispObj,toolTip){ var measNum = 1 var json = makeJsonFromArrayNew(Data, Ndim, Nmeas, MeasFormats, dispObj), cnc , day = d3.time.format("%w"), week = d3.time.format("%U"), dayval = d3.time.format("%d"), month = d3.time.format("%b"), year = d3.time.format("%y"), dayNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"], parseDate = d3.time.format("%y-%b-%d").parse; d3.select("#"+divId).html('<div class="myChart"><div class="tipsy"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div></div>'); d3.selectAll(".tipsy").style("display", "none"); var svg = d3.select("#"+divId).select(".myChart") .append("svg:svg").attr("class","mainsvg") .attr("width", w = Width) .attr("height", h = Height); var marg = 75, cellSize = Math.min(Math.min(Width-marg,(Height-20-marg)/10.5),25); var sumRow = new Array(7), avgRow = new Array(7), row = new Array(7), sumCol = new Array(), avgCol = new Array(), count = 0, maxrow, maxcol; //cnc = json.children[0].children; cnc = json.children; while(cnc){ parseDate = calcParseDate(cnc,parseDate); cnc.sort(function(a,b){ return parseDate(a.name) - parseDate(b.name); }); var arrivalDate = cnc[cnc.length-1].name, dayAfter = parseDate(arrivalDate); if(dayAfter){ dayAfter.setDate(dayAfter.getDate()+1); break; } else cnc=cnc[0].children; } if(cnc) cnc.push(dayAfter); else { d3.select("#"+divId).select(".myChart").html("<center>Inappropriate data for calendar plot. </center>"); return; } //making legend var r = 1, p=0,k1=0,t = 0, width,height, rectangle = new Array(), rectText = new Array(); if(dispObj.getShowLegend()){ width = 0; for(k1=0;Math.floor(k1)<=(Nmeas-Nmeas/r);k1=k1+Nmeas/r){ t=0; var s=0; for(i=Math.ceil(k1);i<(k1+Nmeas/r);i++){ rectangle[i] = svg.append("rect").attr("class","callegend") .attr("fill", function(){ return "black";}) .attr("id",i) .attr("x",function(){return t+12*s+5;}) .attr("y", 10+p*15)//10 .attr('width', 10) .attr('height', 10) .attr("visibility","visible") .on("click", function() { measNum=+this.id+1; clickLegend(measNum); }) if(dispObj.getShowLabels()){ rectText[i] = svg.append("text").attr("class","callegend") .attr("id",i) .attr("x", (11)*(s+1) + t+2 +5) .style("text-anchor", "start") .text(json.measName[i]) .attr("y", function(){ t = t+this.getComputedTextLength()+4; return 18+p*15; })//18 .on("click", function() { measNum=+this.id+1; clickLegend(measNum); }) } if(width<=t+6+(12)*s) width=t+6+(12)*(s+1); s++; } p++; } height = (p+1)*15; svg.append("rect") .attr("class","callegend") .attr("width",width) .attr("height",height) .style("stroke","#DDDDDD") .style("fill","none"); } function clickLegend(measNum){ svg.selectAll(".callegend").attr("fill-opacity",0.5); rectangle[measNum-1].attr("fill-opacity",1); if(dispObj.getShowLabels()) rectText[measNum-1].attr("fill-opacity",1); plotCalendar(measNum); } svg.selectAll(".callegend").attr("fill-opacity",0.5); rectangle[measNum-1].attr("fill-opacity",1); if(dispObj.getShowLabels()) rectText[measNum-1].attr("fill-opacity",1); plotCalendar(measNum); function plotCalendar(measNum){ svg.selectAll("g").remove(); cnc.forEach(function(d) { if(d.name) d.date = parseDate(d.name); else { d.date=d; d.size=new Array(Nmeas); d.size[measNum-1]=0; } }); /* check if dates are proper and date range is not so high like ploting more than 3 years data */ for(var i=cnc.length-1; i>=0; i--){ if(cnc[i].date.getFullYear()<1000){ cnc.splice(i,1); } } if(d3.time.years(cnc[0].date,cnc[cnc.length-1].date).length>5){ d3.select("#"+divId).select(".myChart").html("<center>You are trying to plot " +d3.time.years(cnc[0].date,cnc[cnc.length-1].date).length+ " years calendar, which is not supported.<br> Maximum five years data is supperted. </center>"); return; } var xwidth, i=0, maxdata = d3.max(cnc,function(d){return Math.abs(+d.size[measNum-1])}), mindata = d3.min(cnc,function(d){return +d.size[measNum-1]}), maxnd = d3.max(cnc,function(d){return (+d.size[measNum-1])}), minnd = mindata; var color = d3.scale.quantize() .domain(d3.range(minnd,maxnd,(maxnd-minnd)/11)) .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); for(i=0;i<7;i++) { row[i]=0; sumRow[i]=0; } //Reset sum of each row. var rect = svg.append("g").attr("class", "RdYlGn").attr("transform","translate("+100+","+marg+")").selectAll(".day") .data(function() { return d3.time.days(cnc[0].date,cnc[cnc.length-1].date); }) .enter(); rect.append("rect") .attr("class", "day") .attr("width", cellSize) .attr("height", cellSize) .attr("value", function(d,i){ if(d == cnc[count].date.toString()) { count++; return cnc[count-1].size[measNum-1] } else return 0; }) .attr("x", function(d) {count=0; if(year(cnc[0].date)==year(d)) return xwidth=(week(d)-week(cnc[0].date)) * cellSize; else return xwidth+week(d)*cellSize+cellSize; }) .attr("y", function(d,i) { if(d == cnc[count].date.toString()){ sumRow[day(d)] = sumRow[day(d)] + +cnc[count].size[measNum-1]; count++; row[day(d)]++; } return day(d) * cellSize; }) count=0; svg.selectAll(".day") .attr("class", function(d,i) { if(d == cnc[count].date.toString()){ count++; return "day "+color(+(cnc[count-1].size[measNum-1])); } else { d3.select(this).attr("fill","white"); return "day "; } }) .attr("visibility","visible") .attr("stroke","black"); count=0; svg.selectAll(".day").append("title") .text(function(d,i) { if(d == cnc[count].date.toString()){ count++; return cnc[count-1].name + "; "+cnc[count-1].measName[measNum-1] + ":" +formatData(cnc[count-1].size[measNum-1],MeasFormats[measNum-1], 0); } else return "No Data on "+d; }); count=0; rect.append("text") .text(function(d,i){return dayval(d);}) .attr("x", function(d) { if(year(cnc[0].date)==year(d)) return xwidth=(week(d)-week(cnc[0].date)) * cellSize+cellSize/2-5; else return xwidth+week(d)*cellSize+cellSize+cellSize/2-5; }) .attr("y", function(d) { return day(d) * cellSize + cellSize/2+5; }) .style("opacity",0.4) .append("title") .text(function(d,i) { if(d == cnc[count].date.toString()){ count++; return cnc[count-1].name + "; "+cnc[count-1].measName[measNum-1] + ":" +formatData(cnc[count-1].size[measNum-1],MeasFormats[measNum-1], 0); } else return "No Data on "+d; }); for(i=0;i<7;i++) if(row[i]==0) avgRow[i]=0; else avgRow[i] = sumRow[i]/row[i]; maxrow = d3.max(avgRow,function(d){return Math.abs(d);}); var rowPlot = svg.append("g").selectAll(".rowPlot") .data(sumRow) .enter(); rowPlot.append("rect") .attr("class","rowPlot") .attr("y",function(d,i){ return marg+cellSize*i;}) .attr("x",function(d,i){ return marg*0.85-Math.abs(cellSize*avgRow[i]/maxrow);}) .attr("width",function(d,i){ return Math.abs(cellSize*avgRow[i]/maxrow);}) .attr("height",cellSize-2) .attr("fill",function(d,i){ return d<0 ? "#a50026" : "gainsboro";}); rowPlot.append("text") .attr("class","rowPlot") .text(function(d,i){ return (avgRow[i]/maxrow).toFixed(2); }) .attr("x",marg*0.2) .attr("y",function(d,i){ return marg + cellSize/2 + cellSize*i;}); rowPlot.append("text") .attr("class","rowPlot") .text(function(d,i){return dayNames[i];}) .attr("x",marg*0.9) .attr("y",function(d,i){return marg + cellSize/2 +cellSize*i}); var weekNo = week(cnc[0].date), j=0, f=0; var calendarDays = d3.time.days(cnc[0].date,cnc[cnc.length-1].date); count=0; sumCol[0]=0; //Reset sum of column. for(i=0;i<calendarDays.length;i++) if(calendarDays[i] == cnc[count].date.toString()){ if(weekNo==week(cnc[count].date)) { f++; sumCol[j]=+cnc[count].size[measNum-1]+sumCol[j]; } else { if(f) avgCol[j] = sumCol[j]/f; else avgCol[j]=0; f=1; j++; weekNo++; if(week(cnc[count].date)==0) weekNo = 0; sumCol[j]=+cnc[count].size[measNum-1]; } count++; } else { if(!(weekNo==week(calendarDays[i]))) { if(f) avgCol[j] = sumCol[j]/f; else avgCol[j]=0; f=0; j++; weekNo++; if(week(calendarDays[i])==0) weekNo = 0; sumCol[j]=0; } } avgCol[j] = sumCol[j]/f; maxcol = d3.max(avgCol,function(d){return Math.abs(d);}); var colPlot = svg.append("g").selectAll(".colPlot") .data(sumCol) .enter(); colPlot.append("rect") .attr("class","colPlot") .attr("y",function(d,i){ return marg*0.65-Math.abs(cellSize*avgCol[i]/maxcol); }) .attr("x",function(d,i){ return 100 + cellSize*(i);}) .attr("width",cellSize-2) .attr("height",function(d,i){ return Math.abs(cellSize*avgCol[i]/maxcol); }) .attr("fill",function(d,i){ return d<0 ? "#a50026" : "gainsboro" }); colPlot.append("text") .attr("class","colPlot") .text(function(d,i){ return (avgCol[i]/maxcol).toFixed(2); }) .attr("x",20) .attr("y", function(d,i){ return +cellSize*i; }) .attr("transform",function(){ return "translate("+110+","+marg*0.65+")rotate(-90)"}); var m = svg.selectAll(".month") .data(function() { return d3.time.months(cnc[0].date,cnc[cnc.length-1].date); }) .enter() .append("g"); m.append("path") .attr("class", "month") .attr("d", monthPath) .attr("stroke","white") m.append("text").text(function(d,i){return month(d)+year(d);}).attr("x",function(d,i){return 100 + cellSize*4.25*(i+1);}).attr("y",marg*0.9); svg.selectAll(".month").attr("transform","translate("+100+","+marg+")"); var scaleWidth = Math.round(cellSize*9); var x = d3.scale.linear() .range([0,scaleWidth]) .domain([0,100]); svg.append("g").attr("class","slide") .call(d3.svg.axis().scale(x).orient("bottom").ticks(5)) .attr("transform","translate("+marg+","+(marg+30+cellSize+cellSize*7)+")"); svg.select(".slide").select(".domain").style("stroke","black"); var colgrad = svg.append("g").append("defs") .append("linearGradient") .attr("id",divId+"Mygradient"); colgrad.append("stop") .attr("offset","0%") .attr("stop-color","rgb(165,0,38)"); colgrad.append("stop") .attr("offset","50%") .attr("stop-color","rgb(255,255,191)"); colgrad.append("stop") .attr("offset","100%") .attr("stop-color","rgb(0,104,55)"); var collegend = svg.append("g").attr("class","collegend"); collegend.append("rect").attr("x",marg) .attr("y", marg+20+cellSize*7) .attr("width",scaleWidth) .attr("height",cellSize) .attr("fill",function(){ return "url(#"+divId+"Mygradient)" }); updateColLeg(); function updateColLeg(){ svg.selectAll(".ColLegtext").remove(); collegend.append("text").text(formatData(minnd,MeasFormats[measNum-1], 1)) .attr("class","ColLegtext") .attr("x",marg+2) .attr("y",marg+20+cellSize/2+5+cellSize*7) .style("fill","white"); collegend.append("text").text(json.measName[measNum-1]) .attr("class","ColLegtext") .attr("x",marg+scaleWidth/2) .attr("y",marg+20+cellSize/2+2+cellSize*7) .attr("text-anchor","middle"); collegend.append("text").text(formatData(maxnd,MeasFormats[measNum-1], 1)) .attr("class","ColLegtext") .attr("x",marg+scaleWidth-2) .attr("y",marg+20+cellSize/2+2+cellSize*7) .style("fill","white") .attr("text-anchor","end"); } var drag = d3.behavior.drag() .origin(function() { var t = d3.select(this); return {x: t.attr("x"), y: t.attr("y") }; }) .on("drag", function(d,i) { d3.select(this).attr("transform", function(d,i){ if(this.id == 1){ d3.select(this) .attr("x",Math.max(0,Math.min(d3.event.x,+svg.selectAll("circle")[0][1].attributes[1].value+scaleWidth))) ; return "translate(" + [ Math.max(0,Math.min(d3.event.x,+svg.selectAll("circle")[0][1].attributes[1].value+scaleWidth)),0 ] + ")"; } else { d3.select(this) .attr("x",Math.min(0,Math.max(d3.event.x,+svg.selectAll("circle")[0][0].attributes[1].value-scaleWidth))) ; return "translate(" + [ Math.min(0,Math.max(d3.event.x,+svg.selectAll("circle")[0][0].attributes[1].value-scaleWidth)),0 ] + ")"; } }) }) .on("dragend", function(d,i){ var ll = d3.scale.linear() .domain([0,100]) .range([mindata,d3.max(cnc,function(d){return (+d.size[measNum-1])})]); minnd = +ll(x.invert(+svg.selectAll("circle")[0][0].attributes[1].value)).toFixed(2); maxnd = +ll(x.invert(+svg.selectAll("circle")[0][1].attributes[1].value+scaleWidth)).toFixed(2); var newdata = new Array(); var j=0; for(var i=0;i<cnc.length-1;i++) if(+cnc[i].size[measNum - 1]>= minnd && +cnc[i].size[measNum - 1]<= maxnd) newdata[j++]=cnc[i]; color.domain(d3.range(minnd,maxnd,(maxnd-minnd)/11)) count = 0; svg.selectAll(".day").attr("class", function(d,i) { if(d == cnc[count].date.toString()){ count++; if(+cnc[count-1].size[measNum - 1]>= minnd && +cnc[count-1].size[measNum - 1]<= maxnd) return "day "+color(+(cnc[count-1].size[measNum-1])); else { if(+cnc[count-1].size[measNum - 1]<= minnd) return "day "+color(minnd); else return "day "+color(maxnd); } } else { d3.select(this).style("fill","white"); return "day "; } }) updateColLeg(); }) collegend.append("circle") .attr("cx",marg) .attr("x",0) .attr("cy",(marg+30+cellSize*8)) .attr("r",5) .attr("id",1) .attr("fill","rgb(165,0,38)") .attr("stroke","black") .call(drag) .on("mouseover",function(){ var p = d3.select("#"+divId).select(".myChart").select(".tipsy"); p.html("<div class=\"tipsy-inner\">"+x.invert(+svg.selectAll("circle")[0][0].attributes[1].value).toFixed(2)+"%"+"</div>"); p.style("display", "block").style("visibility", "visible").style("left", d3.event.pageX+"px").style("top", d3.event.pageY+"px"); }) .on("mouseout", function(d,i){hideToolTip(divId, d, i)}); collegend.append("circle") .attr("cx",marg+scaleWidth) .attr("x",0) .attr("cy",(marg+30+cellSize*8)) .attr("r",5) .attr("id",2) .attr("fill","rgb(0,104,55)") .attr("stroke","black") .call(drag) .on("mouseover",function(){ var p = d3.select("#"+divId).select(".myChart").select(".tipsy"); p.html("<div class=\"tipsy-inner\">"+x.invert(+svg.selectAll("circle")[0][1].attributes[1].value+scaleWidth).toFixed(2)+"%"+"</div>"); p.style("display", "block").style("visibility", "visible").style("left", d3.event.pageX+"px").style("top", d3.event.pageY+"px"); }) .on("mouseout", function(d,i){hideToolTip(divId, d, i)}); svg.selectAll(".callegend").attr("transform", function(){ return "translate(" + (scaleWidth+marg+30)+","+(marg+20+cellSize*7)+")"; }); d3.select("#"+divId).style("overflow-x","auto").style("overflow-y","hidden") .select(".mainsvg") .attr("width", function(){ var svgwidth = Math.max(cellSize*avgCol.length+100, marg+scaleWidth+width+30); return svgwidth > Width-20 ? svgwidth+20 : Width-20; }); var xtran0,xtran1; function monthPath(t0) { var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), d0 = +day(t0),d1 = +day(t1); if(year(cnc[0].date)==year(t0) || year(cnc[0].date)==year(t1)){ w0 = +week(t0)-week(cnc[0].date); w1 = +week(t1)-week(cnc[0].date); xtran1 = w1+1; } else { w0 = +week(t0)+xtran1; w1 = +week(t1)+xtran1; } return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize + "H" + w0 * cellSize + "V" + 7 * cellSize + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize + "H" + (w1 + 1) * cellSize + "V" + 0 + "H" + (w0 + 1) * cellSize + "Z"; } } }