El gráfico circular Flot da un error en firebug: "excepción no capturada: Dimensiones no válidas para la gráfica, ancho = nulo, alto = nulo"

También tuve el mismo problema. Establecí un alto y un ancho en la etiqueta <div> y arregló el error.

Puede usar css en línea (como lo hice) o JS para establecer la altura y el ancho. Pero la función plot() se debe llamar solo después de establecer la altura de la <div>

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

¡Yo también tuve este mismo problema! La respuesta no estaba en la lista anterior, así que aquí estaba mi problema y solución.

<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. Observe la función plot. Al principio, no tenía el # en el primer parámetro. Aparentemente, eso es necesario. Resolvió mis problemas.

GG.

Una solución rápida que encontré es simplemente escribir algo entre las etiquetas div. Por ejemplo: Cambio <div id="placeholder"></div> a <div id="placeholder">.</div> o <div id="placeholder">randomtext</div>.

Personalmente, descubrí que usar espacio/pestañas/líneas nuevas no funciona en esta solución rápida.

Tuve el mismo problema integrando plantilla a rails. Esa es una mala manera, pero solo comento la línea que arroja la excepción y añado 2 líneas para establecer ancho y alto en 0 - me ayudó.

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 
}

Si coloca el html de su gráfico en div al que se le da la clase "display: none", obtendrá este error. Debe poner su gráfico html en div que se da "display: block" clase cuando " jquery.flot.js " está cargada.

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

Si este html está en cualquier div que tiene class="display: none" cuando "jquery.flot.js " está cargado, cámbialo a display: block

Por lo tanto, parece que antes de renderizar en un gráfico, necesita volver a recuperar el elemento DOM. Dado que flot manipula los elementos e inserta los suyos propios, parece que está reemplazando el elemento con sus propios elementos.

En tu renderizado, haz:

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

Esto no tiene nada que ver con estar en $(document).ready(), aunque es una buena práctica colocarlo dentro de esto.

Espero que esto ayude!