Robert Vitali Posted April 7, 2021 Share Posted April 7, 2021 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 More sharing options...
Patrick Huebgen Posted April 8, 2021 Share Posted April 8, 2021 @robert.vitali - did you already tried this extension GitHub ibi/wf-extensions-chart d3-based graph extensions for WebFocus 8200 . Contribute to ibi/wf-extensions-chart development by creating an account on GitHub. Link to comment Share on other sites More sharing options...
David Spencer Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
David Beagan Posted April 10, 2021 Share Posted April 10, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now