Auto Refresh Flash Charts in APEX 3.0

Have you already used the new Flash Charts in Oracle APEX 3.0?

As for SVG charts you can set them to Auto Refresh after x seconds. But it looks like that a small nice feature of the SVG charts is missing for the Flash charts. It doesn’t automatically show when the last refresh occurred.

But how can we add that?

At the first look it doesn’t seem to be that easy, because no full page refresh occurs, just the Flash chart is updated with an AJAX call.

But at the second look it isn’t that complicated if you know the dynamic features of JavaScript. Oracle APEX creates a JavaScript timer which calls the APEX JavaScript library function apex_RefreshChart every x seconds.

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

But how can we intercept the apex_RefreshChart so that we can update a “Last Refresh” timestamp on the page?

It’s quite easy if you know how! :-)

In JavaScript a function can be accessed and created like a variable. For example with

var vOldFunction = apex_RefreshChart;

you get a reference to the function apex_RefreshChart which you now can also call with vOldFunction. Nice, isn’t it? But what has this to do with the above problem?

It allows us replace the existing apex_RefreshChart with a new version where we do our additional stuff, but which also calls the original function to get the original functionality APEX provides to refresh the chart.

  1. Open the Region Definition of your Flash chart.
  2. Go to Region Source and add the following JavaScript code in front of the existing <object classid=…
    <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. Go to the Region Footer and add the following HTML code which will be a placeholder for “Last Refresh” timestamp.
    <br>
    <center>
      Chart will refresh every 5 sec.<br>
      Last refresh: <span id="last_refresh"></span>
    </center>

What does it do?

It will overwrite the existing APEX library function apex_RefreshChart with a new version which also sets the current timestamp in the span element identified by “last_refresh”. BTW, if you don’t like the default output of Date(), check out the different JavaScript resources on the Internet to get other formating options.

The above code is also a good example which demonstrates how you can extend/replace the existing JavaScript functions of APEX to add your own behavior.

Want to see an example? Visit my example page.

One thought on “Auto Refresh Flash Charts in APEX 3.0

  1. Patrick,

    Thank you for the great tips. Does something like this work with the AnyChart charts as well? When I look at the region source for an AnyChart, I see that it ends with #REFRESH#, but there’s no refresh code in the body of the region source.

    I have a (bar) chart I want to update/animate automatically to show changes over time by incrementing the :week_ending parameter I’m passing.

    Thanks!!
    -Scott

Comments are closed.