CODEWITHSUNDEEP
javascriptjqueryflot
Louis93
Louis93

Reputation: 3923

Flot: Weird error pops up when attempting to draw graph on page load?

The graph doesn't draw and the console throws this: Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0 is the error.

I tried recreating the error on a JSFiddle but was unable to do so, however here is what it should resemble: JSFiddle

Some notes on this error:

And it seems to get thrown from here in the jquery.flot source: 

    Canvas.prototype.resize = function(width, height) {

        if (width <= 0 || height <= 0) {
            throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0
        }

I've been struggling with this for a while as I have no way of diagnosing what the actual cause of this is. Any input as to how I could approach solving this would be immensely appreciated.

UPDATE:

Upvotes: 2

Views: 2519

Answers (2)

DNS
DNS

Reputation: 38189

That error arises when Flot can't determine the size of the placeholder div. This can happen in several ways, but generally it means that you called $.plot before the placeholder was in the DOM.

This can happen, as @Mark suggested, if you're calling $.plot before the document is ready, but it can also happen in other ways. Are your plots held in tabs, accordions, dialog boxes, or any other widget whose contents are hidden on page load? If so, that's likely implemented by leaving the content div out of the DOM, which means that the plot placeholder is also outside of the DOM and can't be measured.

There's really no other reason why this error would arise, so if you still don't see the problem you'll need to post more of your code - in particular the DOM portion - so we can understand what's happening.

Upvotes: 5

John
John

Reputation: 33

I had same issue last night, what I did to fix this issue was to set the placeholder div size using css something like this:

<style type="text/css">
   #placeholder{
      width:100%;
      height:200px;
  }
</style>

<div id="content" class="demo-container">
   <div id="placeholder" class="demo-placeholder"></div>
</div>

after setting div size it started working.

I hope this helps you.

Upvotes: 2

Related Questions