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: Radar.js
Close
function drawRadarChart(Data, divId, Title, Width, Height, Ndim, Nmeas, MeasFormats, dispObj, toolTip){ // Data = Data[0].map((col, i) => Data.map(row => row[i])); var measNum = 1, width = Width-20, height = Height-45, radius = Math.min(width, height) / 2 - 5, n = Nmeas, k = new Array(Nmeas); var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); for(var i=0; i<Nmeas; i++){ k[i]=1; } var json=makeJsonFromArrayNew(Data, Ndim, Nmeas, MeasFormats[0], dispObj); makeParentsJson(json,measNum); resolveComputeMeasure(json, dispObj.RD.General.Measures); d3.select("#"+divId).html('<div class="myChart"><div class="svgLegend"></div><div class="tipsy"></div></div>'); d3.selectAll(".tipsy").style("display", "none"); var svg = findSvgArea(Nmeas,dispObj,json, Width, Height,divId), radius = Math.min(svg[2], svg[3]) / 2; svg[0].attr("transform", "translate(" + 100 + "," + 50 + ")") curNode = json; if(dispObj.getShowLegend()) makeLegend(svg,Nmeas,measNum,"",clickPlotRadar,json,k,1, dispObj); plotRadarChart(divId, svg, json, radius, json, measNum, n, dispObj, MeasFormats, k, height, width); function clickPlotRadar(ele,k,svg,n){ k[+ele.id]=!k[+ele.id]; svg[0].selectAll("polygon").remove(); svg[0].selectAll("line").remove(); svg[0].selectAll("circle").remove(); svg[0].selectAll("text").remove(); svg[0].selectAll(".axis").remove(); plotRadarChart(divId, svg, curNode, radius, json, measNum, n, dispObj, MeasFormats, k, height, width ); } } function plotRadarChart(divId, svg, curNode, radius, json, measNum, n, dispObj, MeasFormats, k, height, width){ var cfg = { radius: 2, w: width-200, h: height-150, factor: 1, factorLegend: 1, levels: 6, maxValue: 40, radians: 2 * Math.PI, opacityArea: 0.5, ToRight: 5, TranslateX: 100, TranslateY: 100, ExtraWidthX: 10, ExtraWidthY: 10, color: d3.scale.ordinal().range(dispObj.colorArr) }; var cnc = curNode.children; cnc=cnc.slice(0,Math.floor(cfg.w/20)); cfg.levels=Math.floor(cfg.h/50); var miny=d3.min(cnc, function(d) { var s=0; for(i=0;i<n;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<n;i++){ if(k[i]) if(Math.max(d.size[i])>s) s = Math.max(d.size[i]); } return s; }); cfg.maxValue = maxy ; var allAxis = (cnc.map(function(d) { return d.name;})); var total = allAxis.length; var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); var g=svg[0]; var tooltip; //Circular segments for(var j=0; j<cfg.levels-1; j++){ var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); g.selectAll(".levels") .data(allAxis) .enter() .append("svg:line") .attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) .attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) .attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));}) .attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));}) .attr("class", "line") .style("stroke", "grey") .style("stroke-opacity", "0.75") .style("stroke-width", "0.3px") .attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")"); } //Text indicating at what % each level is for(var j=0; j<cfg.levels; j++){ var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); g.selectAll(".levels") .data([1]) //dummy data .enter() .append("svg:text") .attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));}) .attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));}) //.attr("class", "legend") .style("font-family", "sans-serif") .style("font-size", "10px") .attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")") .attr("fill", "#737373") .text(formatSmallScale(Math.ceil((j+1)*(cfg.maxValue/cfg.levels)),MeasFormats[0])); } series = 0; var axis = g.selectAll(".axis") .data(allAxis) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", cfg.w/2) .attr("y1", cfg.h/2) .attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) .attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) .attr("class", "line") .style("stroke", "grey") .style("stroke-width", "1px"); axis.append("text") //.attr("class", "legend") .text(function(d){return d}) .on("click", function(d,i){ for(i=0;i<cnc.length;i++) if(d==cnc[i].name) { d=cnc[i]; break; } clickRadar(divId, d,0, svg, 0,0,width,height,json,measNum, k, 0, dispObj, MeasFormats); }) .style("font-family", "sans-serif") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("dy", "1.5em") .attr("transform", function(d, i){return "translate(0, -10)"}) .attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);}) .attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);}); for(var l=0; l<n; l++){ if(!k[l]) continue; dataValues = []; for(var j=0; j<cnc.length; j++){ dataValues.push([ cfg.w/2*(1-(parseFloat(Math.max(cnc[j].size[l], 0))/cfg.maxValue)*cfg.factor*Math.sin(j*cfg.radians/total)), cfg.h/2*(1-(parseFloat(Math.max(cnc[j].size[l], 0))/cfg.maxValue)*cfg.factor*Math.cos(j*cfg.radians/total)) ]); } //g.selectAll(".nodes").data(cnc); dataValues.push(dataValues[0]); g.selectAll(".area") .data([dataValues]) .enter() .append("polygon") .attr("class", "radar-chart-serie"+l) .style("stroke-width", "2px") .style("stroke", dispObj.colorArr[l]) .attr("points",function(d) { var str=""; for(var pti=0;pti<d.length;pti++){ str=str+d[pti][0]+","+d[pti][1]+" "; } return str; }) .style("fill", dispObj.colorArr[l]) .style("fill-opacity", cfg.opacityArea) .on('mouseover', function (d){ z = "polygon."+d3.select(this).attr("class"); g.selectAll("polygon") .transition(200) .style("fill-opacity", 0.1); g.selectAll(z) .transition(200) .style("fill-opacity", .7); }) .on('mouseout', function(){ g.selectAll("polygon") .transition(200) .style("fill-opacity", cfg.opacityArea); }); series++; }; series=0; for(var l=0; l<n; l++){ if(!k[l]) continue; g.selectAll(".nodes") .data(cnc).enter() .append("svg:circle") .attr("class", "radar-chart-serie"+l) .attr('r', cfg.radius) .attr("alt", function(j){return Math.max(j.size[l], 0)}) .attr("cx", function(j, i){ return cfg.w/2*(1-(Math.max(j.size[l], 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)); }) .attr("cy", function(j, i){ return cfg.h/2*(1-(Math.max(j.size[l], 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)); }) .attr("data-id", function(j){return j.name}) .style("fill", dispObj.colorArr[l]).style("fill-opacity", .9) .attr("fill", dispObj.colorArr[l]) .on('mouseover', function (d){ showToolTipl(divId, d, n, this, MeasFormats,dispObj); z = "polygon."+d3.select(this).attr("class"); g.selectAll("polygon") .transition(200) .style("fill-opacity", 0.1); g.selectAll(z) .transition(200) .style("fill-opacity", .7); }) .on('mouseout', function(d,i){ hideToolTip(divId, d,i); g.selectAll("polygon") .transition(200) .style("fill-opacity", cfg.opacityArea); }) .append("svg:title") .text(function(j){return Math.max(j.size[l], 0)}); series++; }; //Tooltip tooltip = g.append('text') .style('opacity', 0) .style('font-family', 'sans-serif') .style('font-size', '13px'); if(dispObj.getShowLabel()) svg[0].append("text").attr("class","label") .text(cnc[0].dimName) .attr("transform","translate("+(cfg.w/2)+","+(cfg.h+50)+")") .style("text-anchor", "middle"); updateLegendll(divId, svg, curNode,0,0,width,height,json,measNum,k,clickRadar, dispObj, MeasFormats); } var curLogic="next"; function clickRadar(divId, d, i, svg, x,y,width,height,json,measNum, k, c, dispObj, MeasFormats){ //function clickRadar(divId, svg, d, radius, json, measNum, n, dispObj, MeasFormats, k, c, height, width){ if((c==0 && d.children)||(c==1 && d.children[0].children)){ svg[0].selectAll("polygon").remove(); svg[0].selectAll("line").remove(); svg[0].selectAll("circle").remove(); svg[0].selectAll("text").remove(); svg[0].selectAll(".axis").remove(); if( (c==1 || curLogic=="next") && d.children){ curLogic="next"; curNode=d; } else curNode=d.parent; plotRadarChart(divId, svg, curNode, 0, json, measNum, k.length, dispObj, MeasFormats, k, height, width); } else alert("No further dimensions."); }