Jump to content
The ibi Community has moved to a new platform: Please Sign In and choose Forgot Password to continue

Can anyone give me a little insight into creating a GANNT ch...


Robert Vitali

Recommended Posts

Can anyone give me a little insight into creating a GANNT chart in AppStudio I tried looking in the InfoAssist GUI. Then tried to just code it. But just dont know some of the basics of what elements are needed. In Help, says needs one BY field and then 6 other measure fields. Currently using 8.2.06

thanks all

Link to comment
Share on other sites

Example of code for a gannt chart.

-DEFAULTH &TITLE = BC4423- CRA to Relational;

DEFINE FILE PMO_REPORTING_MILESTONES

START_DATE1 /A8YYMD = DATECVT(START_YEAR_D, YYMD, A8YYMD);

START_DATE /A10 = EDIT(START_DATE1,9999/99/99);

END_DATE1 /A8YYMD = DATECVT(END_YEAR_D, YYMD, A8YYMD);

END_DATE /A10 = EDIT(END_DATE1,9999/99/99);

END

TABLE FILE PMO_REPORTING_MILESTONES

PRINT

PMO_REPORTING_MILESTONES.PMO_REPORTING_MILESTONES.PROJECT NOPRINT

COMPUTE OUTPUT/A511 = [ | PROJECT || , ||

TASK || , ||

new Date( || START_DATE || ), ||

new Date( || END_DATE || )],;

WHERE PMO_REPORTING_MILESTONES.PMO_REPORTING_MILESTONES.PROJECT EQ &TITLE.QUOTEDSTRING;

ON TABLE SET HOLDLIST PRINTONLY

ON TABLE HOLD AS HLDDATA FORMAT ALPHA

END

-RUN

-IF &LINES EQ 0 THEN GOTO NOOUTPUT ELSE GOTO CHART;

-NOOUTPUT

---------------------------------------------------------------------------------

- Display empty report message

-*--------------------------------------------------------------------------------

-HTMLFORM IBFS:/WFC/Repository/PMO_Reporting/UI/pos_empty_report.htm

-GOTO ENDIT

-CHART

-*

-* Create Google Timeline chart and present to user.

-*

-HTMLFORM BEGIN

 

 

Star Players and Time Active

 

<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>

 

 

-HTMLFORM END

-ENDIT

Link to comment
Share on other sites

I was able to product this Gantt type chart with a bar chart. I swapped the x and y-axies, and have the y-axis (horizontal) based on number of days from a base date. The base date, which is day 0, is provided in an amper variable.

You can hover on a tasks bar to see its information (illustrated with Task 13 in the image).

 

image.png1038553 20 KB

 

You should be able to run the chart above using the following code if you have the ggsales file installed (all the chart data is just made up in the Define section from random numbers). The y-axis is based on the number of days from the base date ( &BaseYYMD ). The axis doesnt show day numbers because there is javascript in the yaxis: numberFormat specification to convert those numbers to dates, as they appear on the axis labels.

-DEFAULTH &BaseYYMD = &DATEYYMD

DEFINE FILE ibisamp/ggsales

Startdays/I9 = RDUNIF('P8') * 4 + SEQ_NO * SEQ_NO /8 ;

Duration/I9 = RDUNIF('P8') * 20 + SEQ_NO * SEQ_NO / 8 + 1;

Start_Date/YYMD = DTADD('&BaseYYMD', DAY, Startdays);

End_Date/YYMD = DTADD(Start_Date, DAY, Duration);

Task/A9 ='Task ' | EDIT(SEQ_NO, '$$$99');

END

GRAPH FILE ibisamp/ggsales

SUM Startdays Duration

Start_Date End_Date

BY Task

WHERE SEQ_NO LE 15;

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

TYPE=REPORT, TITLETEXT=Gantt, ORIENTATION=LANDSCAPE, $

TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $

TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $

TYPE=DATA, COLUMN=N4, BUCKET=tooltip, $

TYPE=DATA, COLUMN=N5, BUCKET=tooltip, $

*GRAPH_SCRIPT

setReportParsingErrors(false);

setSelectionEnableMove(false);

setShadowDisplay(getFrame(),true);

setFillColor(getFrame(),new Color(250,250,250));

setFillColor(getSeries(0),new Color(250,250,250,0));

setFillColor(getSeries(1),new Color(0,160,160));

setDisplay(getLegendArea(),false);

*GRAPH_JS_FINAL

"blaProperties": {"seriesLayout": "stacked",

"orientation": "horizontal"

},

"xaxis": {"title":false},

"yaxis": {"swapChartSide": true,

"majorGrid": {"visible": true,

"ticks": false

},

"intervalMode": "interval",

"intervalValue": 7,

"numberFormat": function(days) {

var date = new Date("&BaseYYMD.EVAL");

date.setDate(date.getDate() + days);

var yy = date.getFullYear() ;

var m = date.getMonth() + 1;

var mon = date.toLocaleString('en', { month: 'short' });

var d = date.getDate();

if (days==0) { ylabel = yy +'-'+ mon +'-'+ d; }

else { ylabel = mon +'-'+ d; };

return(ylabel);

}

}

*END

ENDSTYLE

END

 

This is a brief explanation, let me know if you have questions.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
  • Create New...