Invalid dimensions for plot, width = 0, height = 400 inside of hidden tab

Question

I have this error when I insert charts in hidden tabs like second, third, etc. here is the error:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

I used bootstrap 2 and jquery:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Here are the libraries:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

And the css:

#plotarea
{
    max-width: none;
    height: 400px;
}
#pie 
{
    max-width: none;
    height: 400px;
}
#barmonth 
{
    max-width: none;
    height: 400px;
}
#baryear 
{
    max-width: none;
    height: 400px;
}

The div with the id of every chart(always change the id to the chart I need to show, like plotarea, pie, barmonth, baryear, etc):

<div id="plotarea"></div>

And I add this style to fix the width error .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }, but even this the chart doesn't draw the charts inside of those hidden tabs only draw the first tab which is in the first view...can you now if there is a form to fix it?

I use the charisma template.

Best regards!

Persnickety

you have to give a width to it. – Ningpo

Hi, I use max-width: none; because the chart automatically change the width of div. is responsive to show in all the screen. the chart fit in every screen – Persnickety

calculate the width for this div based on the width of the window and then plot the graph on it. the idea is it needs a width. – Ningpo

but if I calculate the width per example width: 400px;, when some user with a different screen size see the chart, maybe the chart will be small or if is in smartphone maybe will be bigger than the screen size...with max-width: none; no matter which size of screen do you have always you will see the chart the in all the screen – Persnickety

that what i am saying. you would calculate the width of the div at runtime based on size of the screen/window – Ningpo

The thing is, when the chart is in the first tab the jqflot draw the chart or charts with max-width: none;, but when is in the second tab, third and so on doesn't draw it...that is because the tab is not created like the first one so the jqflot don't know the width...when I insert or change the max-width to width = 600px; jqflot draw it, but the chart don't redraw the charts if per example you turn your device in portrait or landscape mode in your tablet of phone... – Persnickety

you have to explicitly change the width based on screen size change when you turn your phone. after changing the size you should call replot function of jqplot. – Ningpo

let us continue this discussion in chat – Ningpo

SOLVED: I had a same issue, but solved by explicitly giving the style="width:100%" to the outer table (containing the graph) otherwise it was taking the width=0 – Ascribe

Answer 1

Well I already made it!

If you have this library <script src="js/jquery.flot.resize.min.js"></script>, you only need to change this inside of styles.css(the stylesheets file):

max-width: none;
height: 400px;

with this:

width: 100%;
height: 400px;

Now the charts always resize in every screen.

Persnickety

@knocte why the downvote? if you see I don't modified the library... I only added inside of style.css this: width: 100%; height: 400px; The library is not modificated, and if is necessary modified the library for don't have issues or error in the page to show the charts inside of tab I think everybody would to do that...or perhaps you have the code or the link to show the charts inside of tabs? if it so, please share us – Persnickety

you didn't say anything in your answer about style.css so whenever you fix your answer I will remove the downvote – Cernuous

done I added inside of the answer... "you only need change this inside of styles.css(the stylesheets file)" – Persnickety

thank you @knocte, I need explain me better...my english is bad..sorry – Persnickety

adding jquery.flot.resize.min.js fixed it! – Autolysis

so what selector were these styles under? – Bierman

@asterix_jv, what i have to do if i don't want to download library? – Quinquepartite

@Bierman you should add this to the container where the graph should be plotted rendered - anyway this did not work for me. – Hydracid

Answer 2

I had the same issue. A different solution worked for me.

• Make sure you set the height and width
• Make sure flot is not looking for some div which DOES NOT exist. This was the case since I copied it from a page which had three plots, whereas I used the first and the third. I could locate it by using chrome's console (It crashed after not finding the second div in the page. Hence the third one was not being plotted. Just comment out the unused plotting in the js and it worked fine)

Oecology

Yes thank you @my account_ram, right now all the charts are working perfectly – Persnickety

this very same answer is copy/posted in more than one place, insofar that the link is for this very question...... – Anissaanita

Answer 3

None of the above answers worked for me.

I solved it this way:

<div id="flot-line-chart-moving" style="width:500px;height: 200px;"></div>

We can fix the error by setting a width manually, but the problem is, width is hard-coded in the above code, and you don't always want to use 500px for your chart.

so after the chart is draws successfully we can set the width of the chart by jquery:

$('#flot-line-chart-moving').css('width','100%');

You also need to add

<script src="js/jquery.flot.resize.min.js"></script>

Stoeber

Answer 4

I had same issue under IE8 and sometimes Android, mine charts are initially hidden with toggle function and that caused the error trying to plot a chart inside a hidden div. CSS was already defined, so that did not help.

Moving jQuery hide and toggle code AFTER the plotting div elements solved the issue.

Margalit

That was my issue too: hidden div which - occasionally - then threw the aforementioned exception. – Anglosaxon

Answer 5

I had similar trouble when the div wasn't hidden. It would show a similar error in IE11. It took a long time to track down that the container needs to be a block element, i.e. display: block. Hope this helps someone waste less time than me!

Accipitrine