Flot graph resizing error, invalid height

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!

Answers


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).


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 :)


Need Your Help

Can i wait for HTML5 FileSystem DirectoryReader before doing other functions?

html5 filesystems

Im trying to use the new HTML5 FileSystem API for creating/adding/deleting files with javascript. (for use with a self-service cash desk)

Get 404 error when trying to use PersistentManager in Tomcat

java-ee tomcat

I am following a book on Tomcat 7 and I am trying to use PersistentManager with FileStore for session persistence.