How Do You Run Two Different Functions In Javascript

I have two different javascript functions as below. When I call these functions, until the function completes executing, I am showing loading image. The problem I am having is that

Solution 1:

Look at JavaScript callbacks, or for more functionality, jQuery Deferred - a good tutorial is at http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/.

Solution 2:

I don't think you understand how the asynchronous calls are working. With your functions here's how the workflow would go:

vcenter1
rpc
async ajax callto R
vcenter2
rpc 
async ajax callto R

At some later time, vcenter1's ajax call completes, then -->

always callback - which removes loading
complete callback
parse JSON
render chart

At some later time, vcenter2's ajax call completes, then -->

always callback - which removes loading
complete callback
parse JSON
render chart

If you really want it to run vcenter2 after vcenter1, then the call to vcenter2 needs to be in the complete callback of vcenter1's rpc.