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

问题

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?

回答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.

回答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>

回答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.

回答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.

回答5:

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 
}

回答6:

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

回答7:

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!

来源：https://stackoverflow.com/questions/12366549/flot-pie-chart-gives-error-in-firebug-uncaught-exception-invalid-dimensions-f

标签

jquery

charts

pie-chart