Gantt Charts

May 04, 2016, 07:55 AM

Dave

Gantt Charts

Gavin, how about earlier versions...

...and can it be in PDF as well?

May 10, 2016, 10:48 PM

David Briars

quote:
I kinda wonder if at this point it would be easier to just use google charts to build it...

quote:
D3 Charts are IBI approved and are actually easily added in 8.2..

Thanks Tim and Gavin!

The Google Timeline chart is exactly the type of visualization I am searching for: display entities/relationships across a time scale.

Here is a prototype I've got going...

-* File timeline.fex
-*
-* Create test data.
-*
APP FI BASEBALL DISK BASEBALL.MAS (LRECL 80
-RUN
-WRITE BASEBALL
-WRITE BASEBALL FILE=BASEBALL,SUFFIX=FOC
-WRITE BASEBALL SEGNAME=SEG1
-WRITE BASEBALL FIELD=TEAM,,A20,A20,$
-WRITE BASEBALL FIELD=PLAYER,,A20,A20,$
-WRITE BASEBALL FIELD=BEGDATE,,A10,A10,$
-WRITE BASEBALL FIELD=ENDDATE,,A10,A10,$
-RUN
CREATE FILE BASEBALL
MODIFY FILE BASEBALL
FIXFORM TEAM/A20 PLAYER/A20 BEGDATE/A10 ENDDATE/A10
DATA
CHICAGO WHITE SOX   Bill Melton         2015-01-012015-02-01
CHICAGO CUBS        Ron Santo           2015-04-012015-05-25
MILWAUKEE BREWERS   Cecil Cooper        2015-01-012015-04-01
MINNESOTA TWINS     Herman Killebrew    2014-11-192015-11-19
MINNESOTA TWINS     Rod Carew           2014-11-192015-06-19
MINNESOTA TWINS     Rod Carew           2015-07-042015-07-04
MINNESOTA TWINS     Rod Carew           2015-09-042015-09-10
MINNESOTA TWINS     Rod Carew           2015-11-012015-11-30
END
-RUN
-*
-* Create JSON for Google Timeline Chart Data Table.
-*
TABLE FILE BASEBALL
PRINT TEAM NOPRINT
COMPUTE OUTPUT/A511 = '[''' | TEAM || ''',''' ||
                      PLAYER || ''',' ||
		      'new Date(''' || BEGDATE || '''),' ||
		      'new Date(''' || ENDDATE || ''')],';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS HLDDATA FORMAT ALPHA
END
-RUN
-*
-* Create Google Timeline chart and present to user.
-*
-HTMLFORM BEGIN
<html>
<head>
  <title>Star Players and Time Active</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load("current", { packages: ["timeline"] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('mytimeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'Position' });
            dataTable.addColumn({ type: 'string', id: 'Name' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
             !IBI.FIL.HLDDATA;
            ]);

            chart.draw(dataTable);
        }
    </script>
    </head>
    <body>
     <div id="mytimeline" style="height: 400px;"></div>
    </body>
</html>
-HTMLFORM END

I've researched FocalPoint, IB Tech Support Site, opened a case, and checked with my IB Tech Rep, and couldn't seem to find/obtain any example of spreading begin/end date (duration) across a time scale (easily/visually in WF 8.0.7), by a key field. Unless I missed something. :-)

In the meantime, I'm working with a WF/Google Timeline Chart mashup.

(This topic is entitled Gantt Chart, a type of timeline that also displays things like dependencies, critical path... I am OK with WF not having a Gantt Chart, but I did tell my Tech Rep, that a Timeline Chart in WF would be fantastic.)

Reference: https://developers.google.com/...ocs/gallery/timeline

This message has been edited. Last edited by: David Briars,

May 11, 2016, 05:46 PM

Doug

Unfortunately, I could not get David's example to work (posted Tue May 10 2016 22:48).
All the F1 says in DevStudio is:

SET LOOKGRAPH=GANTT
Provides a visual representation of project oriented time critical events.
Gantt charts require six display fields and one sort field, in that order.
Conditional styling and drill-down are not supported for GANTT charts.

May 12, 2016, 09:54 AM

David Briars

Thanks for giving it a go Doug.

The code in my post was being rendered in Google Chrome. I noticed the same code took on a JavaScript error in Internet Explorer.

I added a X-UA-Compatible meta tag, and a doctype tag, and now the code renders in IE like it did in Chrome.

Code with the additional tags:

-*
-* Create test data.
-*
APP FI BASEBALL DISK BASEBALL.MAS (LRECL 80
-RUN
-WRITE BASEBALL
-WRITE BASEBALL FILE=BASEBALL,SUFFIX=FOC
-WRITE BASEBALL SEGNAME=SEG1
-WRITE BASEBALL FIELD=TEAM,,A20,A20,$
-WRITE BASEBALL FIELD=PLAYER,,A20,A20,$
-WRITE BASEBALL FIELD=BEGDATE,,A10,A10,$
-WRITE BASEBALL FIELD=ENDDATE,,A10,A10,$
-RUN
CREATE FILE BASEBALL
MODIFY FILE BASEBALL
FIXFORM TEAM/A20 PLAYER/A20 BEGDATE/A10 ENDDATE/A10
DATA
CHICAGO WHITE SOX   Bill Melton         2015-01-012015-02-01
CHICAGO CUBS        Ron Santo           2015-04-012015-05-25
MILWAUKEE BREWERS   Cecil Cooper        2015-01-012015-04-01
MINNESOTA TWINS     Herman Killebrew    2014-11-192015-11-19
MINNESOTA TWINS     Rod Carew           2014-11-192015-06-19
MINNESOTA TWINS     Rod Carew           2015-07-042015-07-04
MINNESOTA TWINS     Rod Carew           2015-09-042015-09-10
MINNESOTA TWINS     Rod Carew           2015-11-012015-11-30
END
-RUN
-*
-* Create JSON for Google Timeline Chart Data Table.
-*
TABLE FILE BASEBALL
PRINT TEAM NOPRINT
COMPUTE OUTPUT/A511 = '[''' | TEAM || ''',''' ||
                      PLAYER || ''',' ||
		      'new Date(''' || BEGDATE || '''),' ||
		      'new Date(''' || ENDDATE || ''')],';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS HLDDATA FORMAT ALPHA
END
-RUN
-*
-* Create Google Timeline chart and present to user.
-*
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Star Players and Time Active</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load("current", { packages: ["timeline"] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('mytimeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'Team' });
            dataTable.addColumn({ type: 'string', id: 'Player' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
             !IBI.FIL.HLDDATA;
            ]);

            chart.draw(dataTable);
        }
    </script>
    </head>
    <body>
     <div id="mytimeline" style="height: 400px;"></div>
    </body>
</html>
-HTMLFORM END

Hopefully, that was the issue you were having.

Regarding your 2nd point, yep I saw the LOOKGRAPH=GANTT documentation in my research, but no example of it implemented.

Thanks again.

This message has been edited. Last edited by: David Briars,

May 12, 2016, 10:34 AM

GavinL

Dave, the D3 charts are nothing more than JavaScript, so if you code yourself, then yes you can pull them into earlier versions.

I'm on 8.1.04 and was able to copy/paste David's first example and it worked nicely.. I'm now trying to figure out where to implement it!! haha.

May 12, 2016, 10:43 AM

GavinL

I just noticed the names in the list. I actually have a baseball I had signed, while in the Marines, by Harmon Killebrew.

May 20, 2016, 02:27 AM

Dave

Yes, I know it's just javascript. Which works fine for HTML output.

...but what about PDF output?

May 23, 2016, 02:11 PM

GavinL

I've given up on PDF output for extensive reports via WebFOCUS.. I wrote a C# app that can be turned into a service, that will take a URL, load it into a browser control, resize the control for the size of page, then save the screen of the browser control to a PNG, then convert the PNG to a PDF using free third party lib PdfSharp. Guess what, it's look identical to the report. Doesn't care what language is used.

It's a great day being a developer. Who has limits, not I...