invoking javascript function in Rails3

I'm porting my very simple Rails2 application using RGraph to Rails3.

I've just copied script function from RGraph's example page.

<script>
  window.onload = function()
  {
    var line9 = new RGraph.Line('line9', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25]);
    line9.Set('chart.background.barcolor1', 'white');
    line9.Set('chart.background.barcolor2', 'white');
    line9.Set('chart.background.grid', true);
    line9.Set('chart.linewidth', 5);
    line9.Set('chart.gutter', 35);
    line9.Set('chart.hmargin', 5);
    line9.Set('chart.shadow', true);
    line9.Set('chart.tickmarks', null);
    line9.Set('chart.units.post', 'k');
    line9.Set('chart.xticks', 8);
    line9.Set('chart.colors', ['red', 'green', 'blue']);
    line9.Set('chart.key', ['Sales (not good)']);
    line9.Set('chart.key.shadow', true);
    line9.Set('chart.key.rounded', true);
    line9.Set('chart.xaxispos', 'center');
    line9.Set('chart.background.grid.autofit', true);
    line9.Set('chart.background.grid.autofit.numhlines', 16);

    // Define a context menu that allows you to toggle the background grid. The two options simply:
    //  1. Set the appropriate setting on the object
    //  2. Clear the canvas
    //  3. Draw the graph again
    line9.Draw();
  }

  function draw_line()
  {
    var line9 = new RGraph.Line('line8', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25]);
    line9.Set('chart.background.barcolor1', 'white');
    line9.Set('chart.background.barcolor2', 'white');
    line9.Set('chart.background.grid', true);
    line9.Set('chart.linewidth', 5);
    line9.Set('chart.gutter', 35);
    line9.Set('chart.hmargin', 5);
    line9.Set('chart.shadow', true);
    line9.Set('chart.tickmarks', null);
    line9.Set('chart.units.post', 'k');
    line9.Set('chart.xticks', 8);
    line9.Set('chart.colors', ['red', 'green', 'blue']);
    line9.Set('chart.key', ['Sales (not good)']);
    line9.Set('chart.key.shadow', true);
    line9.Set('chart.key.rounded', true);
    line9.Set('chart.xaxispos', 'center');
    line9.Set('chart.background.grid.autofit', true);
    line9.Set('chart.background.grid.autofit.numhlines', 16);

    // Define a context menu that allows you to toggle the background grid. The two options simply:
    //  1. Set the appropriate setting on the object
    //  2. Clear the canvas
    //  3. Draw the graph again
    line9.Draw();
  }

  draw_line(); // call here !!!
</script>

...and canvas tag at the bottom of the page

<canvas id="line8" width="475" height="350">[Please wait...]</canvas> 
<canvas id="line9" width="475" height="350">[Please wait...]</canvas> 

Line chart line9 is okay, but line8 is invisible even though I've called draw_line(); inside the script tag. If I test this in Rails2, both worked without problem.

What's wrong?

These're javascript links of the page.

<script src="/javascripts/prototype.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/effects.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/dragdrop.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/controls.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/rails.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/application.js?1290397238" type="text/javascript"></script> 

<!-- RGraph --> 
<script src="/javascripts/rgraph/RGraph.common.core.js?1288418842" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.context.js?1288083348" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.annotate.js?1284451808" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.tooltips.js?1284725300" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.zoom.js?1284020392" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.resizing.js?1284451808" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGra开发者_如何学JAVAph.line.js?1288418842" type="text/javascript"></script> 

You need to move draw_line(); in window.onload

<script>
  window.onload = function()
  {
    # line9 stuff

    draw_line();
  }

  function draw_line()
  {
    # line8 stuff
  }
</script>

Because it read and execute your javascript before it complete to read all your html.

(for that reason you need to put the call in window.onload that is called at the end of the rendering)