title: How to debug morris.js 'Graph container element not found' error
body: <p>I want to display a <a href="http://morrisjs.github.io/morris.js/" rel="nofollow noreferrer"><code>morris.js</code></a> graph</p>
  
  <p>I have the following at the bottom of my page.</p>
  
  <pre><code>&lt;script src="/assets/raphael.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/morris.js?body=1"  type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  Morris.Line({
      element : 'line-example',
      data    : $('#averages-chart').data('averages'),
      xkey    : 'month',
      ykeys   : ['average'],
      labels  : ['Average']
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But I'm getting the following error in console:</p>
  
  <blockquote>
    <p>Error: Graph container element not found
        throw new Error("Graph container element not found");</p>
  </blockquote>
  
  <p>The graph container IS there as it renders properly if I load the javascript in the asset pipeline (but that causes all other javascript to not work).</p>
  
  <p>Please help debug.</p>
  
  <p>I have also tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(window).bind("load", function() {
      Morris.Line({
          element : 'line-example',
          data    : $('#averages-chart').data('averages'),
          xkey    : 'month',
          ykeys   : ['average'],
          labels  : ['Average']
      });
  });
  &lt;/script&gt;
  </code></pre>