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


Need Your Help

Mapping HDFS directory with .tsv files to Hive

hadoop hive hdfs

I have data into HFDS as a .tsv format. I need to load them into Hive table. I need some help.

Get execution time function in python

python function time measure

I create this working function for getting time of another function: