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, heig

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 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 3

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 4

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

Answer 5

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!

Answer 6

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 
}