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?

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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.