Flot pie chart gives error in firebug: "uncaught exception: Invalid dimensions for plot, width = null, height = null"

Question

I using flot pie chart for plotting pie charts. but it shows error in firebug that

uncaught exception: Invalid dimensions for plot, width = null, height = null

I have given the height and width from stylesheet also. and tried also like this

<div id="placeholder1" style="width:140px;height:140px" ></div>

how to resolve this?

Check that you placed your code within `$(document).ready()` handler. — thecodeparadox, Sep 11 '12 at 09:25
the code is within $(document).ready() handler. but result is same — user1662343, Sep 12 '12 at 03:59

thecodeparadox · Accepted Answer · 2012-09-11T09:37:10.010

41

Check these:

You include the jQuery library first and then flot js library
Wrap the whole code within $(document).ready() handler function.
you bind the flot with correct id and there is no repeat of same id.
if your div is dynamic i.e. appeared to DOM after page load then bind plot() after the element appeared to DOM.

edited Sep 11 '12 at 09:37

answered Sep 11 '12 at 09:27

thecodeparadox

86,271
21
138
164

4

I check all these , but result is same. – user1662343 Sep 12 '12 at 04:00
1

In my case the – lilalinux May 28 '14 at 16:27
1

also, check all references in JS to make sure you are calling existing DIV id. In my case there was more than one call to the DIV, and I missed it thinking there was only one. – Dennis Aug 08 '14 at 14:52
1

You need to re-fetch the DOM element for your chart. It gets changed by flot when you call $.plot. i.e. do something like this: $.plot($("#myChart"), data, options); – Brian Corbin Dec 10 '15 at 18:24
Bullet #3 (ID related) happens more than expected...thanks! – Koshinae Sep 15 '16 at 08:41

score 14 · Answer 2 · answered May 29 '14 at 09:05

I also had the same problem. I set a height and a width to the <div> tag and it fixed the error.

You can use either inline css (as I did) or JS to set the height and the width. But plot() function should be called only after we set the height of the <div>

<div class="bars_two" style="height:300px;"></div>

score 10 · Answer 3 · answered Apr 30 '15 at 13:59

I had this same problem too! The answer was not listed above, so here was my problem and solution.

<div id="chart" class="chart" style="width:100%;height:250px;"></div>

Javascript:

 <script type="text/javascript">
    $(document).ready(function () {
        var data = [...];
        var options = {...};
        $.plot($("#placeholder"), data, options);
    });
</script>

So. Notice the plot function. At first, I didn't have the # in the first parameter. That is necessary apparently. It solved my problems.

GG.

score 7 · Answer 4 · answered Aug 31 '13 at 02:39

7

A quick solution I found is to just type something between the div tags. For example: Change <div id="placeholder"></div> to <div id="placeholder">.</div> or <div id="placeholder">randomtext</div>.

Personally, I found that using space/tabs/newlines doesn't work in this quick solution.

answered Aug 31 '13 at 02:39

hexicle

2,121
2
24
31

This did not work for me. I got a period, my graph outline, and the same indexsize error – BReal14 Jun 27 '14 at 20:10

score 3 · Answer 5 · edited Jan 18 '17 at 12:44

3

If you put your chart html in div which is given "display: none" class you will get this error. You must put your chart html in div which is given "display:block" class when "jquery.flot.js" is loaded.

<div id="pie_chart" class="chart"> </div>

if this html is in any div which has class="display: none" when "jquery.flot.js" is loaded, change it to display: block

edited Jan 18 '17 at 12:44

Prafulla Kumar Sahu

9,321
11
68
105

answered Apr 13 '14 at 15:54

Hubeyb Özkul

646
7
8

1

I'm having a similar problem. If this is true, How can I include the script once at the head section of the page, and then generate charts on the fly with ajax? – BReal14 Jun 27 '14 at 20:08
this is brilliant. – deepak mishra Nov 07 '21 at 07:47

kpblc · Answer 6 · 2014-04-10T15:39:50.640

I had the same problem integrating template to rails. That's a bad way, but I just comment the line which throws the exception and add 2 lines to set width and height to 0 - it helped me.

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

  if (width <= 0 || height <= 0) {
    // COMMENTED NEXT LINE
    // throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
    // NEW LINES ADDED
    width = 0;
    height = 0;
  }

  // ... others code 
}

score 1 · Answer 7 · edited Jan 18 '17 at 12:43

So, it seems that before you render to a chart, you need to re-fetch the DOM element. Since flot manipulates the elements and inserts its own, it looks like it's replacing the element with its own elements.

In your render, do:

$.plot($(".myChartId || #myChartClass"), myData, myOptions);

This has nothing to do with being in $(document).ready(), although it is good practice to place it inside of this.

Hope this helps!

Flot pie chart gives error in firebug: "uncaught exception: Invalid dimensions for plot, width = null, height = null"

7 Answers7

Linked