[SOLVED] Displaying a graphical representation of joins

July 03, 2018, 03:50 PM

Hello everyone,
I am looking for a way to graphically display table joins. I know it is possible to use CHECK FILE filename PICTURE and the display is alright but is not very appealing to look at. I am looking for a display that is similar to Join Editor which is a much better graphical representation of table joins. Does anyone know how this can be done or am I hoping for too much?

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

July 03, 2018, 03:55 PM

Hallway

What environment? AppStudio? DevStudio? InfoAssist?

Where are the joins? MasterFile? Report? Chart?

July 03, 2018, 04:49 PM

AlexB

Hallway,
I'm using 8202M Text Editor and the joins were created as synonyms on MasterFiles to create Clusters.

July 03, 2018, 05:19 PM

Hallway

Can you open the masterfile in AppStudio (not just text editor)? If so, then just click on the Modeling View tab at the bottom and you will have a GUI representation of the joins

July 03, 2018, 05:28 PM

AlexB

I don't have AppStudio and that is why I was curios if there was a way to display the nice GUI representation that AppStudio has just using the Text Editor

July 05, 2018, 04:18 AM

Wep5622

You can get (most of) the JOIN details from TABLE FILE SYSCOLUM (without an 'N'!).

With that information it should be possible to generate SVG (which uses an XML format to describe its vector graphics) boxes for each table and lines between them.
How to visualize how they're related is probably the harder part.

That looks like an interesting project. I'm sure several people on this forum would be happy to have that (me included).

Another option is to generate an input file for an open source utility called GRAPHVIZ; The benefit of using that tool is that it handles the pathing issues for you. I haven't used it myself, though.

July 05, 2018, 06:06 AM

Tony A

This is something that I wrote quite a while ago now (2+ years?) but it still functions OK and gives something close to what you want(?) by using Googles OrgChart (why reinvent the wheel?)

Anyway, for what it's worth - The table name is variablised as is the segment name. The default table is Employee but try it with WF_RETAIL.

-SET &ECHO = ON;
SET HOLDLIST = PRINTONLY

-DEFAULT &TBNAME = 'EMPLOYEE'
-DEFAULT &SEGNAME = '_FOC_NULL'

TABLE FILE SYSCOLUM
PRINT COMPUTE C_USAGE/A44 = '<span>/'||USAGE||'</span>'; NOPRINT
      COMPUTE C_NAME/A160 = IF KEYSEQ NE  0  THEN '* '|SUBSTR(255,NAME,1,50,50,'A50')||C_USAGE
	                   ELSE IF DEFINE EQ 'Y' THEN '<span style="color:rgba(255,0,0,0.5);">Define</span> '|SUBSTR(255,NAME,1,50,50,'A50')||C_USAGE
	                   ELSE IF DEFINE EQ 'F' THEN '<span style="color:rgba(255,0,0,0.5);">Filter</span> '|SUBSTR(255,NAME,1,50,50,'A50')||C_USAGE
	                   ELSE SUBSTR(255,NAME,1,50,50,'A50')||C_USAGE; NOPRINT
      COMPUTE C_SEGNAME/A60 = SUBSTR(255,SEGNAME,1,50,50,'A50')||(' ('|SEGTYPE||')'); NOPRINT
      COMPUTE COLUMS/A2042V = IF SEGNO NE LAST SEGNO THEN '<div><div class="'||SEGTYPE||'">'||C_SEGNAME||'</div><div>'||C_NAME ELSE LAST COLUMS ||'<br>'||C_NAME;
   BY SEGNO
   BY SEGNAME
   BY PARENT
   BY COLNO
WHERE TBNAME EQ '&TBNAME.EVAL'
WHERE SEGNAME EQ '&SEGNAME.EVAL'
ON TABLE HOLD AS TEMPHLD2
END
-RUN

TABLE FILE TEMPHLD2
  SUM COMPUTE COL/A2500 = LST.COLUMS||'</div></div>';
   BY SEGNO
   BY SEGNAME
   BY PARENT
ON TABLE HOLD AS TEMPHLD1
END
-RUN

TABLE FILE TEMPHLD1
PRINT COMPUTE CNTR/I3 = LAST CNTR + 1; NOPRINT
      COMPUTE COMMA/A1 = IF CNTR EQ &LINES THEN '' ELSE ','; NOPRINT
      COMPUTE HARCHY/A4096 = '[{v:'''||SEGNAME||''', f:'''||MAX.COL||'''}, '''||PARENT||''', '''']'||COMMA;
   BY SEGNO  NOPRINT
   BY PARENT NOPRINT
ON TABLE SAVE AS MYJSON
END
-RUN

-IF &LINES EQ 0 THEN GOTO :EndNow;

-HTMLFORM BEGIN
<html>
 <head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
     google.load('visualization', '1', {packages:['orgchart']});
	 google.setOnLoadCallback(drawChart);
	 function drawChart() {
	      var data = new google.visualization.DataTable();
		  data.addColumn('string', 'Name');
		  data.addColumn('string', 'Manager');
		  data.addColumn('string', 'Tooltip');
		  data.addRows([
!IBI.FIL.MYJSON;
		  ]);
	      var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
	      chart.draw(data, {allowHtml:true, allowCollapse:true, size:'small'});
	 }
  </script>
  <style>
     .google-visualization-orgchart-node {vertical-align:top;}
     div {vertical-align:top;text-align:left;}
     span {color:#999;}
     .S {background-color:#faa;}
     .U {background-color:#afa;}
     .SH {background-color:#daa;}
     .KM {background-color:#fcc;}
     .KU {background-color:#ccf;}
     .KL {background-color:#aac;}
     .KLU {background-color:#99a;}
  </style>
 </head>
 <body>
   <div id='chart_div'></div>
 </body>
</html>
-HTMLFORM END

-:EndNow

T

July 05, 2018, 09:01 AM

AlexB

Tony,
It works great, this was exactly what I was looking for! Thank you, Wep, and Hallway for all the help!

July 05, 2018, 11:34 AM

Michael L Meagher

I put Tony's solution in my toolbox. Very nice.

July 06, 2018, 04:38 AM

Wep5622

Tony, I think you're missing a bit at the top to make it truly brilliant. You probably have that in your profile or something, but the code you posted doesn't display JOINs and DEFINE's.

SQL FMI SET JOINFIELDS ON
SQL FMI SET TEMPDEFINES ON

July 06, 2018, 11:29 AM

Hallway

Great share TonyA.

July 06, 2018, 11:37 AM

CoolGuy

Nice! Thanks for sharing this Tony. Really slick! Appreciate it!

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