Flexibler Resource-Gantt-Chart mit Oracle Apex und AnyChart / AnyGantt (1)

Die Standard Charting-Features von Oracle Apex bieten einen schnellen unkomplizierten Weg, um eine Vielzahl einfacher Charts zu erstellen. Sobald weitere Anforderungen dazukommen, stößt man allerdings schnell an die Grenzen der Apex-Wizards. Da der Oracle Apex – Umgebung aber die volle Funktionalität der AnyChart – Library zur Verfügung steht, lassen sich wesentlich anspruchsvollere Charts erstellen. Vereinfachend kommt hinzu, dass die AnyChart – Library über eine gute Online Dokumentation und XML-Referenz verfügt.

In den folgenden Beiträgen stelle ich ein entsprechendes Beispiel für einen Resource-Gantt mithilfe von AnyGantt vor.

Hier ist meine Demo-Seite zu dem Beispiel:

https://apex.oracle.com/pls/apex/f?p=DEMO_JENS_MARRE:ANY_GANTT

(Login über: demo/demo)

Dabei habe ich folgende Anforderungen an den Gantt-Chart in Apex gestellt:

• A1 Der Resource-Gantt-Chart soll über Suchfelder gesteuert werden
• A2 Wenn ein Suchfeld geändert wird, soll der Gantt-Chart „The-Ajax-Way“ aktualisiert werden
• A3 Der Gantt-Chart soll auf deutsch sein
• A4 Feiertage sollen markiert werden
• A5 Es sollen mehrere Balkenfarben zur Verfügung stehen, die mit einem schönen Verlauf dargestellt werden sollen
• A6 Im Balken soll eine Beschriftung erscheinen
• A7 Per Maus-Hover soll bei Bedarf eine Info zum Balken ein- und ausgeblendet werden
• A8 Per Mausklick auf den Balken, soll ein Zusatzdialog zum Gantt-Chart geöffnet werden.

In diesem Beitrag stelle ich den Rahmen für die händische Einbettung von AnyGantt in Apex vor. Im nächsten Beitrag, erweitere ich das Beispiel, um die weiteren Punkte dieser Anforderungsliste.

Das generelle Konzept für die Einbettung von AnyGantt in Apex ist Folgendes:

• Für den Gantt-Chart wird ein leeres DIV-Element angelegt,
• Die AnyGantt Flash-Datei wird im Page-Header per Javascript eingebunden
• Der XML-Inhalt des Gantt-Charts wird über einen On-Demand-Prozess erzeugt und per Javascript abgerufen
• Mit entsprechenden Apex-Items kann die Ansicht gesteuert werden. Für diese Auswahl-Items werden onchange Dynamic Actions angelegt, die den On-Demand-Prozess aufrufen

Zunächst benötigen Sie die AnyGantt-Dateien: AnyGantt.js, AnyGantt.swf

Laden Sie diese im ApexBuilder hoch unter

• „Shared Components → Static Files“
• Application: „No application“
• Erstellen Sie eine neue Apex-Page
• Klicken Sie auf Edit Page
• Hinterlegen Sie die JavaScript-Datei unter „JavaScript → File URLs“
• #WORKSPACE_IMAGES#AnyGantt.js
• Die Flashdatei AnyGantt.swf wird später dynamisch über Javascript eingebunden

Legen Sie eine HTML-Region für die Suchkriterien an und legen Sie dort Page-Items an, z.B.

• Name: P4_DAY
• Display As: Datepicker

Legen Sie eine Dynamic Action für diese Page-Items an

• Identification
• Name: „REFRESH_GANTT“
• When
• Event : Change
• Selection Type: Item
• Item(s) : <die Page-Items, die Sie vorher angelegt haben>
• True-Action
• Action: Execure Javascript
• Code: loadGantt();

  Bemerkung: Die Funktion loadGantt wird weiter unten beschrieben.

Legen Sie eine HTML-Region für den Gantt-Chart an und tragen Sie unter „Region Source:“ ein

<div id=“chartDiv“ name=“chartDiv“></div>

Legen Sie einen neuen Apex Application Prozess an:

• „Shared Components → Application Processes → Create“
• Name: „generate_gantt_xml“
• Point „On Demand Run“
• Type: PL/SQL
• Process Text

BEGIN
htp.p(‚
<anygantt>
<settings>
<navigation enabled=“True“ position=“Top“ size=“30″>
<buttons collapse_expand_button=“false“ align=“Near“ />
<text>Resource-Gantt Chart</text>
<font face=“Verdana“ size=“10″ bold=“true“ color=“White“ />
</navigation>

<locale>

<date_time_format week_starts_from_monday=“True“>
<months>
<names>Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember</names>
<short_names>Jan,Feb,Mar,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez</short_names>
</months>

<week_days>
<names>Sonntag,Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag</names>
<short_names>So,Mo,Di,Mi,Do,Fr,Sa</short_names>
</week_days>
<format>
<full>%dd.%MM.%yyyy %HH24:%mi</full>
<date>%dd.%MM.%yyyy</date>
<time>%HH.%mm.</time>
</format>
</date_time_format>
</locale>

</settings>
<datagrid width=“180″>
<columns>
<column attribute_name=“RowNum“ width=“30″>
<header>
<text>#</text>
</header>
</column>
<column attribute_name=“Name“ cell_align=“LEFTLEVELPADDING“ padding=“0″ width=“150″>
<header>
<text>Mitarbeiter</text>
</header>
</column>
</columns>
</datagrid>

<timeline>

<scale start=“04.08.2014″ end=“08.09.2014″
show_start=“18.08.2014″ show_end=“25.08.2014″
/>

<plot line_height=“30″ item_height=“20″ item_padding=“5″ >

<non_working_days show=“true“>
<fill enabled=“true“ type=“Solid“ color=“#aa2222″ opacity=“0.1″ />
</non_working_days>
<grid>
<vertical>
<line enabled=“true“ color=“DarkSeaGreen“ thickness=“1″ opacity=“0.2″  />
</vertical>
</grid>
</plot>
</timeline>

<styles>
<period_styles>

</period_styles>
</styles>
<resource_chart>
<resources>
<resource id=“109697″ name=“BLAKE“ />
<resource id=“109700″ name=“CLARK“ />
<resource id=“109756″ name=“JONES“ />
<resource id=“109755″ name=“SCOTT“ />
<resource id=“109699″ name=“FORD“ />
<resource id=“109698″ name=“TURNER“ />
</resources>
<periods>
</periods>

</resource_chart>
</anygantt>
‚);
END;

Bekemerkung: Dies ist ein statischer Beispiel XML-Code, um das Gerüst für den Resource-Gantt Chart in Oracle Apex zum Laufen zu bringen. Im nächsten Beitrag erweitere ich den AnyGantt-XML-Code, um die eigentlichen Anforderungen an den Chart abzubilden.

Tragen Sie eine neue Javascript Funktion ein, die den AnyGantt-Chart initialisiert und die Funktion zum Laden des XML-Codes bereitstellt, im Page-Header unter

• JavaScript → Function and Global Variable Declaration“

var chart= new AnyGantt(‚#WORKSPACE_IMAGES#AnyGantt.swf‘);

with(chart) {
width = „100%“;  // skaliert die Anzeige dynamisch mit dem Browserfenster
height = „500“;
name = „#CHART_NAME#“;
initText = „#FLASH_INIT#“;
resourcesLoadingText = „#FLASH_RESOURCES#“;
noDataText = „#FLASH_NO_DATA#“;
templateLoadingText = „#FLASH_TEMPLATES#“;
// To allow jq modal windows
wMode = „transparent“;
src = „/i/flashchart/anygantt_4/swf/Preloader.swf“;
}

/*
* Calls the on-demand-prozess  generate_gantt_xml and posts all necessary data
* to retrieve the content
*/
function loadGantt() {
chart.setLoading(„Loading new chart…“);

$.post(‚wwv_flow.show‘,
{
„p_request“: „APPLICATION_PROCESS=generate_gantt_xml“,
„p_flow_id“: $v(‚pFlowId‘),
„p_flow_step_id“: $v(‚pFlowStepId‘),
„p_instance“: $v(‚pInstance‘),
„p_arg_names“: [„P4_DAY“],  /* List of your search parameters */
„p_arg_values“: [$v(„P4_DAY“)] /* $v-List of your  search parameters */
},
function success(data) {

try {
chart.setData(data.toString());
chart.write(‚chartDiv‘);
}
catch(err) {
if(console && console.log) {
console.log(„Fehler: „+err);
console.log(err.message);
}
}
});
}