1. In your web browser go to http://www.d3js.org. 2. At bottom of the first browser screen full (you might need to scroll down a little) click the link d3.zip. It will download the zip archive https://github.com/mbostock/d3...wnload/v3.4.8/d3.zip 3. d3.zip contains three files. a. LICENSE b. d3.js – Delete i. This file contains special characters that WebFOCUS cannot process. D3 forums have many people yelling about this as far back as 2012 and it still has special characters. c. d3.min.js – Keep i. This is a compact version of d3.js and will do everything the same, but without the special characters. 4. Create a folder on your PC, say, d3_zipped, and unzip d3.zip to it. 5. Using your computer’s operating system utilities, say, Microsoft Windows’ File Explorer or the Unix/Linux shell, create a WebFOCUS application folder for d3, e.g.., [b]<WebFOCUS Server>\<drive>$\ibi\apps\d3[/b] 6. Take the files unzipped in step 4 above and copy them to the d3 app folder created in step 5 above. 7. Then, using the WebFOCUS Reporting Server console, add the d3 app folder to the Application Path.
1. You can go to this URL to find different styles: a. https://github.com/mbostock/d3/wiki/Gallery 2. For this demo we are going to use: a. http://bl.ocks.org/NPashaP/9796212 3. Right click on page and view source. 4. Click on the link that looks like this: a. [b]/NPashaP/raw/9796212/8ed537693ddcb720b79cae93d979385c3c3b08c3/[/b] 5. This will take you to that report only page. 6. Right click on this report and view source. a. You can click and download the d3.v3.min.js file if you like, but it’s the same as the d3.min.js you have already downloaded earlier. Just make sure you are using the same name as the one you have in the ibi\apps\d3 folder. 7. Download the bipartite.js file and place it in the same folder as the D3.min.js under the ibi\apps\d3 folder on the WebFOCUS server.
1. Go into WebFOCUS or DevStudio and create a folder under content called D3 for this demo. You can call it anything, but to be consistent, we will call it D3. 2. Make sure the user you’re using has access to the CAR Synonym. 3. Right click and create a new FEX, however you would like to do it then save it and name it anything you like. 4. Copy and Paste this code into your FEX.
ENGINE INT CACHE SET ON *-HOLD_SOURCE -DEFAULTH &WF_SUMMARY='Summary'; -DEFAULTH &WF_TITLE='WebFOCUS Report'; TABLE FILE CAR SUM CAR.SPECS.MPG CNT.CAR.COMP.CAR AS 'CARCT' PCT.CNT.CAR.COMP.CAR/F7 AS 'CARPCT' BY CAR.ORIGIN.COUNTRY ON TABLE HOLD AS File1 FORMAT BINARY ON TABLE NOTOTAL ON TABLE SET PAGE-NUM NOLEAD ON TABLE SET SQUEEZE ON ON TABLE SET EMPTYREPORT ON ON TABLE SET HTMLCSS ON ON TABLE SET HTMLENCODE ON ON TABLE SET CACHELINES 100 ON TABLE SET ASNAMES MIXED ON TABLE SET HOLDATTRS ON ON TABLE SET HOLDLIST PRINTONLY ON TABLE SET STYLE * TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, $ ENDSTYLE END -RUN -*COMPONENT=Define_FILE1 DEFINE FILE File1 Grouping/A50V='["' || FILE1.FILE1.COUNTRY || '", "' || EDIT ( FILE1.FILE1.MPG ) || '",' || EDIT ( FILE1.FILE1.CARCT ) || ', ' || EDIT ( FILE1.FILE1.CARPCT ) || '],' ; END -DEFAULTH &WF_SUMMARY='Summary'; -DEFAULTH &WF_TITLE='WebFOCUS Report'; TABLE FILE File1 BY Grouping AS '' -*ON TABLE PCHOLD FORMAT ALPHA ON TABLE HOLD AS MYFILE FORMAT DOC ON TABLE NOTOTAL ON TABLE SET PAGE-NUM NOLEAD ON TABLE SET SQUEEZE ON ON TABLE SET EMPTYREPORT ON ON TABLE SET HTMLCSS ON ON TABLE SET HTMLENCODE ON ON TABLE SET CACHELINES 100 ON TABLE SET STYLE * TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, $ ENDSTYLE END -RUN -HTMLFORM BEGIN <!DOCTYPE html> <meta charset="UTF8"> <html lang="en"> <head> <style> svg text{ font-size:12px; } rect{ shape-rendering:crispEdges; } </style> <script charset="utf-8" type="text/javascript" src="/approot/d3/d3.min.js"></script> <script charset="utf-8" type="text/javascript" src="/approot/d3/biPartite.js"></script> </head> <body> <script> var sales_data=[ !IBI.FIL.MYFILE; ]; var width = 900, height = 900, margin ={b:0, t:40, l:170, r:50}; var svg = d3.select("body") .append("svg").attr('width',width).attr('height',(height+margin.b+margin.t)) .append("g").attr("transform","translate("+ margin.l+","+margin.t+")"); var data = [ {data:bP.partData(sales_data,2), id:'Sales', header:["Car","MPG", "Car MPG Mapping"]} ]; bP.draw(data, svg); </script> </body> </html> -HTMLFORM END
ENGINE INT CACHE SET ON SET PAGE-NUM=NOLEAD SET ARGRAPHENGINE=JSCHART SET EMBEDHEADING=ON SET GRAPHDEFAULT=OFF -DEFAULTH &WF_STYLE_UNITS='PIXELS'; -DEFAULTH &WF_STYLE_HEIGHT='405.0'; -DEFAULTH &WF_STYLE_WIDTH='770.0'; -DEFAULTH &WF_TITLE='WebFOCUS Report'; GRAPH FILE car -* Created by Info Assist for Graph SUM CAR.BODY.SALES BY CAR.ORIGIN.COUNTRY BY CAR.COMP.CAR BY CAR.CARREC.MODEL BY CAR.BODY.BODYTYPE ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET VZERO OFF ON GRAPH SET UNITS &WF_STYLE_UNITS ON GRAPH SET HAXIS &WF_STYLE_WIDTH ON GRAPH SET VAXIS &WF_STYLE_HEIGHT ON GRAPH SET LOOKGRAPH EXTENSION ON GRAPH SET AUTOFIT ON ON GRAPH SET STYLE * *GRAPH_SCRIPT setPieDepth(0); setPieTilt(0); setDepthRadius(0); setPlace(true); setCurveFitEquationDisplay(false); *END INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$ TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $ TYPE=DATA, COLUMN=N1, BUCKET= >levels, $ TYPE=DATA, COLUMN=N2, BUCKET= >levels, $ TYPE=DATA, COLUMN=N3, BUCKET= >levels, $ TYPE=DATA, COLUMN=N4, BUCKET= >levels, $ TYPE=DATA, COLUMN=N5, BUCKET= >value, $ *GRAPH_SCRIPT setReportParsingErrors(false); setSelectionEnableMove(false); setDataTextPosition(3); setDisplay(getDataText(*),true); setPieFeelerTextDisplay(1); *GRAPH_JS_FINAL "pieProperties": { "holeSize": "0%" }, "chartType": "com.ibi.sunburst", "agnosticSettings": { "chartTypeFullName": "com.ibi.sunburst" } *END ENDSTYLE END -RUN -*IA_GRAPH_FINISH
var text = g.append("text") .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; }) .attr("x", function(d) { return y(d.y); }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .text(function(d) { return d.name; });
In FOCUS since 1986 | WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2 | ||
WebFOCUS App Studio 8.2.06 standalone on Windows 10 |
quote:...
https://embed.plnkr.co/4JMq4o/
http://bl.ocks.org/metmajer/5480307
Appreciate any thoughts or ideas using this type of chart with WF
...
-* File SunburstD3Demo.fex -* Author: D. Briars -* -* Extract and summarize data to be visualized. -* TABLE FILE GGSALES SUM DOLLARS BY REGION BY ST ON TABLE HOLD AS HLDSUM FORMAT FOCUS END -RUN -* -* Create the temporary MacGuyver Master and data file. -* Code from Focal Point: http://forums.informationbuild...027040786#1027040786 -* EX -LINES 7 EDAPUT MASTER,FSEQ,C,MEM FILENAME=FSEQ,SUFFIX=FIX SEGNAME=CHAR1,SEGTYPE=S0 FIELDNAME=BLANK,BLANK,A1,A1,$ SEGNAME=CHARS,SEGTYPE=S0,PARENT=CHAR1,OCCURS=VARIABLE FIELDNAME=CHAR,CHARS,A1,A1,$ FIELDNAME=COUNTER,ORDER,I2,I4,$ -RUN FILEDEF FSEQ DISK FSEQ.FTM -RUN -WRITE FSEQ FILEFORMACGUYVERFILEFORMACGUYVERFILEFORMACGUYVER -RUN -* -* Reformat extracted data to JSON -* JOIN BLANK WITH REGION IN HLDSUM TO BLANK IN FSEQ AS J1 -* DEFINE FILE HLDSUM BLANK/A1 WITH REGION = ' '; END -* TABLE FILE HLDSUM PRINT REGION NOPRINT ST NOPRINT DOLLARS NOPRINT COUNTER NOPRINT COMPUTE REGIONRECORD_YN/A1 = IF REGION EQ LAST REGION THEN 'N' ELSE 'Y'; NOPRINT COMPUTE ENDOFREGION_CODE/A24 = IF LAST REGION EQ ' ' THEN ' ' ELSE IF REGIONRECORD_YN EQ 'Y' THEN ']},' ELSE ' '; COMPUTE OUTREC/A1024 = IF COUNTER EQ 1 THEN '{"name": "' | REGION | '", "children": [ ' ELSE '{"name": "' | ST | '", "size": ' | FPRINT(DOLLARS, 'I9', 'A9') | '},'; BY REGION NOPRINT BY ST NOPRINT BY COUNTER NOPRINT -* WHERE TOTAL ((COUNTER EQ 1) AND (REGIONRECORD_YN EQ 'Y')) OR COUNTER EQ 2; -* ON TABLE SET HOLDLIST PRINTONLY ON TABLE HOLD AS SUNJSON FORMAT ALPHA END -RUN -* -* Visualization Presentation to User. -* D3 Sunburst Code from: Zoomable Sunburst with Labels - Code from Plunker: https://embed.plnkr.co/4JMq4o/ -* -HTMLFORM BEGIN <!DOCTYPE html> <html> <meta charset="utf-8"> <style> path { stroke: #fff; fill-rule: evenodd; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var width = 760, height = 520, radius = Math.min(width, height) / 2; var x = d3.scale.linear() .range([0, 2 * Math.PI]); var y = d3.scale.linear() .range([0, radius]); var color = d3.scale.category20(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")"); var partition = d3.layout.partition() .value(function (d) { return d.size; }); var arc = d3.svg.arc() .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function (d) { return Math.max(0, y(d.y)); }) .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); }); var g = svg.selectAll("g") .data(partition.nodes(getData())) .enter().append("g"); var path = g.append("path") .attr("d", arc) .style("fill", function (d) { return color((d.children ? d : d.parent).name); }) .on("click", click); var text = g.append("text") .attr("transform", function (d) { return "rotate(" + computeTextRotation(d) + ")"; }) .attr("x", function (d) { return y(d.y); }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .attr("font-family", "sans-serif") .attr("fill","black") .text(function (d) { return d.name; }); function click(d) { // fade out all text elements text.transition().attr("opacity", 0); path.transition() .duration(750) .attrTween("d", arcTween(d)) .each("end", function (e, i) { // check if the animated element's data e lies within the visible angle span given in d if (e.x >= d.x && e.x < (d.x + d.dx)) { // get a selection of the associated text element var arcText = d3.select(this.parentNode).select("text"); // fade in the text element and recalculate positions arcText.transition().duration(750) .attr("opacity", 1) .attr("transform", function () { return "rotate(" + computeTextRotation(e) + ")" }) .attr("x", function (d) { return y(d.y); }); } }); } d3.select(self.frameElement).style("height", height + "px"); // Interpolate the scales! function arcTween(d) { var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, 1]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); return function (d, i) { return i ? function (t) { return arc(d); } : function (t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; }; } function computeTextRotation(d) { return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180; } function getData() { return { "name": "Sales", "children": [ !IBI.FIL.SUNJSON; ]} ]} } </script> </body> </html> -HTMLFORM END