I want to display a morris.js graph

I have the following at the bottom of my page.

<script src="/assets/raphael.js?body=1" type="text/javascript"></script>
<script src="/assets/morris.js?body=1"  type="text/javascript"></script>

<script type="text/javascript">
Morris.Line({
    element : 'line-example',
    data    : $('#averages-chart').data('averages'),
    xkey    : 'month',
    ykeys   : ['average'],
    labels  : ['Average']
});
</script>
</body>
</html>

But I'm getting the following error in console:

Error: Graph container element not found throw new Error("Graph container element not found");

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).

Please help debug.

I have also tried:

<script type="text/javascript">
$(window).bind("load", function() {
    Morris.Line({
        element : 'line-example',
        data    : $('#averages-chart').data('averages'),
        xkey    : 'month',
        ykeys   : ['average'],
        labels  : ['Average']
    });
});
</script>

I want to display a morris.js graph

I have the following at the bottom of my page.

<script src="/assets/raphael.js?body=1" type="text/javascript"></script>
<script src="/assets/morris.js?body=1"  type="text/javascript"></script>

<script type="text/javascript">
Morris.Line({
    element : 'line-example',
    data    : $('#averages-chart').data('averages'),
    xkey    : 'month',
    ykeys   : ['average'],
    labels  : ['Average']
});
</script>
</body>
</html>

But I'm getting the following error in console:

Error: Graph container element not found throw new Error("Graph container element not found");

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).

Please help debug.

I have also tried:

<script type="text/javascript">
$(window).bind("load", function() {
    Morris.Line({
        element : 'line-example',
        data    : $('#averages-chart').data('averages'),
        xkey    : 'month',
        ykeys   : ['average'],
        labels  : ['Average']
    });
});
</script>

• javascript
• ruby-on-rails
• ruby
• morris.js

1 Answer 1

A html div with id 'line-example' is not present. Add it. The chart will be displayed there.