morris.js Graph container element not found

Z

6

34

Why am I getting an exception

Uncaught Error: Graph container element not found

when using morris.js?

Zymogenesis answered 11/8, 2013 at 21:15 Comment(1)

When you want to share an answer on Stackoverflow, post your question describing the issue, then post the answer separately and mark it as the valid answer for your question. That way it'll get more exposure. – Braxton 4/9, 2013 at 17:54

Z

36

Solution: Put the javascript after the morris.js div

From this post from tiraeth: https://github.com/morrisjs/morris.js/issues/137

Zymogenesis answered 18/9, 2013 at 18:1 Comment(1)

When using with angularjs and a directive. you may wrap it in a $timeout. – Laundrywoman 12/11, 2014 at 10:9

T

9

if don' t use the chart on this page, you can do this:

Go to the line where the exception is throwed in morris.js

change it like this: before:

  if (this.el === null || this.el.length === 0) {
   return;
    // throw new Error("Graph placeholder not found.");
  }

Tribe answered 12/10, 2017 at 13:6 Comment(1)

i want to add it in my code. where can i add this ? – Alicaalicante 31/5, 2019 at 7:30

W

2

I had this issue when I was using the node.js framework. Taking out the script tags containing the morris charts and the jquery from the bottom of the html file worked for me. I am using Require.js to load the dependencies for my project instead. I hope this helped.

Windowlight answered 17/8, 2015 at 14:26 Comment(0)

R

1

Try This

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
</head>
<body>
    <div id="donut-example"></div>

                    <script type="text/javascript">
                        Morris.Donut({
                            element: 'donut-example',
                            data: [
                              { label: "Download Sales", value: 12 },
                              { label: "In-Store Sales", value: 30 },
                              { label: "Mail-Order Sales", value: 20 }
                            ]
                        });
                    </script>

    </div>
</body>

Rossiya answered 10/4, 2017 at 6:29 Comment(0)

M

0

JavaScript's code gets executed before the DOM contains #annual element. Put the javascript after the div or use jQuery.ready()

Monogamist answered 16/2, 2015 at 13:29 Comment(0)

T

0

I have copied some scripts containing morris implementation and had this problem. Apparently, the scripts are initializing 3 morris charts when in my HTML I only had implemented 1 element, so it was failing to initialize the bars for the unexisting elements

Tattered answered 13/1, 2023 at 9:56 Comment(0)

Recommended topics

Hot tags