Flot graph resizing error, invalid height

Question

I'm trying to add flot graph to my page, and i'm having some problems with adding resizing to the graph. For the resize plugin to work width and height og placeholder div need to be set to 100%. But when i do that and want to load the graph in new window i try to call the plot method on doc ready but the height og my div is 0 althoug the containg div har height = 600px(so the placeholder div should have the same?).

 <div id ="ResizableContainer" class="ui-widget-content" style="width:900px;height:600px;">
    <div id="placeholderForGraph" class="graph-placeholder" ></div>
</div>

my.css:

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

my.js

$("#placeholderForGraph").text('');
$("#ResizableContainer").show();
$("#placeholderForGraph").plot([data], options);<- error

Error: Invalid dimensions for plot, width = 900, height = 0

If you set heigth before calling plot, the graph will not resize in height how can i add height to the div without destroying the resizing ability?

Thanks in advance!

Answer 1

Set min-height for your .graph-placeholder to some reasonable absolute value like 100px.

And I would also recommend setting min and max values for the resizable container (see here).

Answer 2

My whole fix is a bit hacky but it works. I first set the height to be the same as the containers

 $("#ResizableContainer").show();
    if ($("#placeholderForGraph").height() === 0) {
        $("#placeholderForGraph").css('min-height', $("#ResizableContainer").height()); 
    }
    plot = $.plot($("#placeholderForGraph"), []); 

And then fill out the graph with data and options of my choice and after that i change the style og the placeholder:

 $("#placeholderForGraph").css('min-height', "100px");
 $("#placeholderForGraph").css('height', "100%");
 $("#placeholderForGraph").css('width', "100%"); 

Big thanks to @Raidri for help :)