[SOLVED] Example: How to use D3 in WebFOCUS (FEX)

Took me 3 days to get all this working however, the first day was spent writing it in C# on IIS to make sure I understand how D3 worked. Thought I would post it, just in case someone else decided to use D3 within WebFOCUS and pull its data straight from a Synonym instead of loading it via CSV.

This example shows you how to setup WebFOCUS to use D3 and how to execute against a Hold file without the use of creating CSV's and loading via JS.

Setting up WebFOCUS was pulled from a document I got through the chain of people, which looks as if it derived from Summit 2014 User Conference. There was a PowerPoint and a Word document sent to me, both seem to be the exact same wording.

Snip it from Summit document, but altered a little:
Downloading and Installing D3

This step, downloading and installing the D3 JavaScript library. Installing and running D3 from the WebFOCUS Client / Repository will be covered later in this document.

Instructions:

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.

I’m setup now, now what?
Now you need to figure out what D3 report you’re going to use.

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.

I have the report, how do I use it.

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

At the Finish Line
Run it and you should get a pretty graph using the CAR Synonym.

Keep in mind, this is a very simple version of using D3, but it shows how you can load this from a hold file instead of creating CSVs, then loading the CSV via Javascript.

Have a happy FOCUS day and let me know if you like of see something I should change to make this demo better.

This message has been edited. Last edited by: FP Mod Chuck,

- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server

Posts: 578 | Registered: October 01, 2014

Ram Prasad E

Master

posted