Automatisch aktualisierte Flash Charts in APEX 3.0

Habt Ihr bereits die neuen Flash Charts von Oracle APEX 3.0 verwendet?

Wie auch bereits für SVG Charts ist es möglich eine automatische Aktualisierung alle x Sekunden durchzuführen. Aber es sieht so aus als wäre ein nettes kleines Feature der SVG Charts vergessen worden, nämlich den letzten Zeitpunkt der Aktualisierung anzuzeigen.

Aber wie können wir das Hinzufügen?

Auf den ersten Blick schaut es nicht so einfach aus, den es wird kein komplettes Seiten Refresh gemacht, sondern das Flash Chart wird mittels AJAX aktualisiert.

Aber auf den zweiten Blick ist es nicht so kompliziert, wenn man die dynamischen Features von JavaScript kennt. Oracle APEX erstellt einen Timer, welcher die APEX JavaScript Library Funktion apex_RefreshChart alle x Sekunden aufruft.

<script type="text/javascript" language="javascript">
function chart_r1258481816185669517_InitRefresh(pNow) {
setTimeout("chart_r1258481816185669517_InitRefresh(true)",5000);
if (pNow){apex_RefreshChart (1, '1258481816185669517', 'en-us');}
}

apex_SWFFormFix('c1258481816185669517');
addLoadEvent(chart_r1258481816185669517_InitRefresh(false))
</script>

Aber wie können wir den apex_RefreshChart Aufruf abfangen um einen "Letzte Aktualisierung" Zeitstempel auf der Seite zu aktualisieren?

Es ist sehr Einfach wenn man weiß wie! :-)

In JavaScript können Funktionen wie Variablen erstellt und referenziert werden. Zum Beispiel kann man mit

var vOldFunction = apex_RefreshChart;

eine Referenz auf die Funktion apex_RefreshChart bekommen, welche man dann auch mit vOldFunction aufrufen kann. Nett, oder? Aber wie hilft uns das jetzt bei obigem Problem?

Es erlaubt uns die existierende Funktion apex_RefreshChart durch eine neue Version zu ersetzen welche die zusätzliche Funktionalität abdeckt, aber danach die Original Funktion aufruft um die APEX Funktionalität zum aktualisieren eines Charts auszuführen.

1. Öffne die "Region Definition" des Flash charts.
2. Danach im "Region Source" den folgenden JavaScript Code for dem existierendem <object classid=... hinzufügen
   

   <script type="text/javascript">
   var vOriginal_apex_RefreshChart = apex_RefreshChart;
   
   apex_RefreshChart = function(page_id,region_id,browser_lang)
   {
   document.getElementById("last_refresh").innerHTML = Date();
   vOriginal_apex_RefreshChart(page_id, region_id, browser_lang);
   };
   </script>

3. Danach im "Region Footer" den folgenden HTML Code hinzufügen, welcher als Platzhalter für den "Letzte Aktualisierung"'s Zeitstempel gilt.
   

   <br>
   <center>
   Chart will refresh every 5 sec.<br>
   Last refresh: <span id="last_refresh"></span>
   </center>

Was macht der ganze Code jetzt?

Er überschreibt die existierende APEX Library Funktion apex_RefreshChart mit einer neuen Version welche auch den aktuellen Zeitpunkt in dem SPAN Element mit der id "last_refresh" setzt. Übrigens, wenn Ihr die Default Konvertierung der Date() Funktion nicht mögt, schaut Euch die diversen JavaScript Quellen im Internet an um weite Formatierungsoptionen zu bekommen.

Der obige Code ist ein gutes Beispiel um zu demonstrieren wie man die bestehenden JavaScript Funktionen von APEX erweitern/ersetzen kann um eigene Funktionalität hinzuzufügen.

Wollt Ihr ein Beispiel von dem ganzen sehen? Dann schaut mal auf meine Beispiel Seite.