Apex 4.2 regions refresh Puzzle

  (Apex 4.2.6, Oracle 11.2,0.4, browser is chrome.)

I have been working on one tickets analysis dashboard for our team, the requirement is that I will need to have five regions:

     Region A and Region B are Pie Chart region, A will list tickets by 5 different ops teams; B will list tickets by priorities(Critical/High/Medium/Low);

     Region C is Line chart region, it lists daily tickets for last 30 days, this is to show the trend.

     Region D and E are reports regions, D is the summary report region showing daily tickets number  by priorities;  E is the report Region showing the detail ticket information

     One of requirement is to have the Pie Chart drill down function: when click the Pie chart slice of Region A, it shall refresh all rest regions which will put a filter on all other regions based on the value of that Pie Slice. For example, if user click on the Ops DB slice, then region B/C/D/E shall only show tickets belongs to Ops DB team.  Similar requirement need to be done on the B Pie Chart region.

With Apex, I was able to create the dashboard quickly, the 'fun' part came later when I tried

 to enable the drill down function: I was using the javascript and the trigger('apexrefresh') call but 

funny thing is that all Chart regions are able to get refreshed correctly, while the report regions(D

and E) only work randomly, What I means is that when click on the pie chart slice, the other charts regions works well while the reports region sometime get refreshed but sometime not.  

Looking through the debug tool, I can see that the value did get updated into the item value when I click the pie chart slice so the functions is ok, and when I run the same javascript through the debug console, the reports regions got refreshed as well.

After several hours trying to figure out the reasons/issues, it turned out that I will need to put some delay before I can get the reports regions refreshed, after that be done, everything take pace finally. 

Here are some part of the code:

1. Java functions (in the page's Function and Global Variable Declaration area:)

function clickPie(pID){

    $x('P13_DEPT').value = pID;

    $('#B').trigger('apexrefresh');

    $('#C').trigger('apexrefresh');

    setTimeout(function() {$('#D').trigger('apexrefresh');},1250);

    setTimeout(function() {$('#E').trigger('apexrefresh');},1250);

//    $('#D').trigger('apexrefresh');

//    $('#E').trigger('apexrefresh');

    $('#DEPT').text("Team -"+$x("P13_DEPT").value+"/"+$x("P13_PRIORITY").value);

    $('#DEPT1').text("Team -"+$x("P13_DEPT").value+"/"+$x("P13_PRIORITY").value);

  };

function clickPie2(pID){

    $x('P13_PRIORITY').value = pID;

    $('#C').trigger('apexrefresh');

    setTimeout(function() {$('#D').trigger('apexrefresh');},1250);

    setTimeout(function() {$('#E').trigger('apexrefresh');},1250);

//    $('#D').trigger('apexrefresh');

//    $('#E').trigger('apexrefresh');

    $('#DEPT').text("Team -"+$x("P13_DEPT").value+"/"+$x("P13_PRIORITY").value);

    $('#DEPT1').text("Team -"+$x("P13_DEPT").value+"/"+$x("P13_PRIORITY").value);

  };

2. Pie Chart Link:

     Action Link: Link To Customer Target

     Target: URL

     URL:  javascript:clickPie("#LABEL#");  --- in the second chart, this will be javascript:clickPie2("#LABEL#");

    

As you can see, the red  parts in the code are the original one, which only works sometimes; the green part are the new one with delay, which work well.

This is strange to me though, I'm still not sure why it behaves like this though.