title: How to retrieve Meteor.js Collection then pass it to a function after DOM loads
body: <p>How can a query on the collection be executed first, then execute another function when a particular <code>div</code> has been rendered?</p>
  
  <p>If I were to do the following, I get an error from <code>.highcharts()</code> stating that it is unable to find the div <code>#chart</code>.</p>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;template name="chart"&gt;
      &lt;div id="chart"&gt;{{init}}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>Template.chart.init = function() {
      // Get results of query first
      var data = myCollection.find();
  
      data.forEach(function(row) {
          console.log(data.price); // yes we received the collection
      });
  
      // Then pass to function
      $('#chart').highcharts(data);
  };
  </code></pre>
  
  <p>Now If I were to call the function <code>highcharts()</code> after the template dom has been rendered via <code>Template.chart.rendered</code> as shown below, I get an error stating that the variable <code>data</code> is not found.</p>
  
  <pre><code>Template.chart.init = function() {
      var data = myCollection.find();
  
      data.forEach(function(row) {
          console.log(data.price);
      });
  };
  
  
  Template.chart.rendered = function() {
      $('#chart').highcharts(data)
  }
  </code></pre>
  
  <p>Here it appears that <code>Template.chart.rendered</code> runs before <code>Template.chart.init</code>. How can I run the <code>highcharts</code> function after <code>data</code> has been retrieved from mongo?</p>