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

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)

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.