(SOLVED) Integrating D3 with WebFOCUS

May 09, 2014, 08:14 AM

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,

May 11, 2014, 09:39 AM

Gun

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

May 12, 2014, 11:07 AM

gregv

Gun, You have to refresh the baseapp folder to see any new files, if you viewed it before the files were there.
IHTH.
Greg

May 12, 2014, 11:35 AM

dhagen

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.

May 12, 2014, 01:02 PM

Jump_faster

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

May 13, 2014, 01:35 AM

Gun

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.

May 13, 2014, 05:52 AM

Gun

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.

May 13, 2014, 09:24 AM

Jump_faster

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,

May 13, 2014, 10:01 AM

Gun

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

May 13, 2014, 03:07 PM

Gun

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,