title: How to make a function execute only after certain function completes?
body: <pre><code>Event.observe(document, 'dom:loaded', function() {
  
      new Ajax.Request('/HumblFin/Serv', {
          method:'get',
          onSuccess: function(transport){
              var data = transport.responseText.evalJSON();
              drawChart(data);
          },
          onFailure: function(){ alert('Something went wrong...') }
      });
  
  
  function drawChart(data)
  {
  
       for (var i = 0; i &lt; data.jobs.length; i++)  { 
           priceData.push([i, data.jobs[i].INCPU]);
           dateData.push(data.jobs[i].Dater);
  
          }
  }
  </code></pre>
  
  <p>Hereafter completion of the <code>drawchart(data)</code> method only I want to execute the below code 
  but unfortunately the function <code>HumbleFinance.init</code> is being called with empty data.</p>
  
  <p>Please tell me how to solve this.
  I can't put the below code inside the drawChart(data) function </p>
  
  <pre><code>HumbleFinance.init('finance', priceData , dateData);
  Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
  
      var area = e.memo[0];
      xmin = Math.floor(area.x1);
      xmax = Math.ceil(area.x2);
  
      var date1 = dateData[xmin];
      var date2 = dateData[xmax];
  
      $('dateRange').update(dateData[xmin] + ' - ' + dateData[xmax]);
  
  });
  });
  </code></pre>