Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (SOLVED) Integrating D3 with WebFOCUS

Read-Only Read-Only Topic
Go
Search
Notify
Tools
(SOLVED) Integrating D3 with WebFOCUS
 Login/Join
 
Gun
Silver Member
posted
Hi

Please find the attached link that takes to pdf, that shows how to integrate D3 within WebFOCUS.

http://www.infobuild.co.za/wp-.../wfn_nov_dec2013.pdf

The issue I am facing is, that I am not able to create an APP HOLD of COMT format file like the one mentioned in the pdf.

Could you please show me an example of passing a XML / CSV /HTML / URL data to the html file and demonstrate a simple example.

Thank you,

This message has been edited. Last edited by: Gun,


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Gun
Silver Member
posted Hide Post
I tried to create an app hold of the file in the baseapp folder. But I was not able to see the csv nor the master file in the others folder or the master files folder. Anybody Any Idea ?

APP HOLD baseapp

TABLE FILE CAR
PRINT MPG AS mpg
BY MODEL AS model
ON TABL
E SET BYDISPLAY ON
ON TABLE SET ASNAMES ON
ON TABLE HOLD FORMAT COMT AS CARS
END
-RUN

Thank you


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
gregv
Guru
posted Hide Post
Gun, You have to refresh the baseapp folder to see any new files, if you viewed it before the files were there.
IHTH.
Greg


Greg

current client: WF 8.1.05 & 8.2 - Windows 7 64bit - Tomcat 7 - MRE / BID - IE11

local: WF 8.2 - Windows 7 64bit - Tomcat 6 - MRE / BID - FOCUS - IE11

PMF 8
 
Posts: 274 | Location: Boston/New England | Registered: February 12, 2006Report This Post
dhagen
Virtuoso
posted Hide Post
You might be multi-tiered. So your server directories are not available to you web application layer.

If true, change the URL for the com file to use the EDAGET command set.


"There is no limit to what you can achieve ... if you don’t care who gets the credit." Roger Abbott
 
Posts: 1102 | Location: Toronto, Ontario | Registered: May 26, 2004Report This Post
Jump_faster
Gold member
posted Hide Post
Hi Gun,
Here is simple example of Word Cloud graph/report that I created sometime ago using D3 JavaScript Library. 
TABLE FILE CAR
LIST
     CAR.COMP.CAR
     CAR.CARREC.MODEL
ON TABLE NOTOTAL
ON TABLE HOLD AS MYHOLD FORMAT ALPHA
END
DEFINE FILE MYHOLD
ARY/A250='"'| MYHOLD.MYHOLD.CAR | ' " ';
END
TABLE FILE MYHOLD
SUM CNT.MYHOLD.MYHOLD.LIST NOPRINT
PRINT
     MYHOLD.MYHOLD.LIST NOPRINT
     MYHOLD.MYHOLD.CAR NOPRINT
     MYHOLD.MYHOLD.MODEL NOPRINT
	ARY
COMPUTE COMMA/A1 = IF CNT.MYHOLD.MYHOLD.LIST NE  MYHOLD.MYHOLD.LIST THEN ',' ELSE '';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS MYHOLD2 FORMAT ALPHA
END
-RUN
-HTMLFORM BEGIN
<!DOCTYPE html>
<head>
 <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
     
</head>
<body>
<script src="http://...../d3.js"></script>
<script src="http://...../d3.layout.cloud.js"></script>
<script>
  var fill = d3.scale.category20();

  d3.layout.cloud().size([300, 300])
      .words([ !IBI.FIL.MYHOLD2;].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 300)
        .attr("height", 300)
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
</script>


d3.js: https://raw.githubusercontent..../master/lib/d3/d3.js
d3.layout.cloud.js: https://raw.githubusercontent....r/d3.layout.cloud.js


WebFOCUS 7.7. Windows Server 2008. All Outputs.

WEBFOCUS 7.6.11. Windows Server 2003. All Outputs.
 
Posts: 60 | Registered: July 10, 2012Report This Post
Gun
Silver Member
posted Hide Post
I refreshed it and files were there.

Jump_faster: I get a blank screen, when i try to run your code. I have been using google chrome and IE 10. Can you please let me know, what could be the reason.

Thank you all.


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Gun
Silver Member
posted Hide Post
Jump_Faster: When I ran the code in IE 10 with developer tools option, I got this error message
for the below line

https://raw.githubusercontent..../master/lib/d3/d3.js

because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Jump_faster
Gold member
posted Hide Post
Hey Gun, I don't think you can directly reference the code on github (I might be wrong ). You can copy the code and host it on your server and make necessary adjustment for this part of your code 

....
<script src="http://...../d3.js"></script>
<script src="http://...../d3.layout.cloud.js"></script>...
.

The code I gave you works fine for me. Here is screenshot of end result.

This message has been edited. Last edited by: Jump_faster,


WebFOCUS 7.7. Windows Server 2008. All Outputs.

WEBFOCUS 7.6.11. Windows Server 2003. All Outputs.
 
Posts: 60 | Registered: July 10, 2012Report This Post
Gun
Silver Member
posted Hide Post
I pasted the entire d3.layout.cloud.js into my code and it started working.

Thank you Jump_Faster. Any Idea about the other way

APP FI CARS DISK baseapp/CARS.csv

TABLE FILE CARS
PRINT *
END


I get to see the records, But When I try to link the csv, I get a blank screen.

-HTMLFORM BEGIN
< !DOCTYPE html>

<script type="text/javascript" src="/approot/d3/d3.v3.min.js">



The Bar Chart

<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;


var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);


var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +
")");

var dataset;

d3.csv("/baseapp/cars.csv", function(data) {
dataset = data;
data.forEach(function(d) {
d.mpg = +d.mpg;
});

x.domain(data.map(function(d) { return d.model; }));
y.domain([0, d3.max(data, function(d) { return d.mpg; })]);

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.model); })
.attr("width", x.rangeBand())

.attr("y", function(d) { return y(d.mpg); })
.attr("height", function(d) { return height - y(d.mpg); });

}); // end d3.csv

-HTMLFORM END


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Gun
Silver Member
posted Hide Post
Anyone any Idea on how to get the above D3 - barchart working.I guess I am going wrong with the path for the d3.csv. Please let me know on how to find the correct path for the csv. The Csv resides in baseapp folder (within Others) folder.

This is the path from the Properties.

IBFS:/ADHOC/EDA/BIM1021/APPPATH/baseapp/

When I give http://servername/approot/baseapp/cars.csv, it says file not found.

This message has been edited. Last edited by: Gun,


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Gun
Silver Member
posted Hide Post
Tried to give the path for the d3.csv (by placing the file in the shared drive) like below.

//drive456/sharedadhoc/network/cars.csv

was not successful.


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
Gun
Silver Member
posted Hide Post
Used D3.XHR instead of D3.CSV, Got the output. thank you for all the inputs.


7.7, Windows, HTML
 
Posts: 38 | Registered: December 30, 2011Report This Post
vaayu
Guru
posted Hide Post
Hello Gurus,
Has anyone attempted to do more D3 custom charts using our HOLD files. I'm familiar with 8.2 d3 HTML5 extensions but, there are some limitations so I'm looking to use HOLD file/JS method.
https://www.jasondavies.com/coffee-wheel/
I really like this chart, wondering if we can structure our CAR data to do this.
Please advise


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (SOLVED) Integrating D3 with WebFOCUS

Copyright © 1996-2020 Information Builders