Uncaught Invalid dimensions for plot, width = null, height = null for flot charts api

Question

I am using flot charts API for showing the graphs and I am successful in plotting the data. I am loading around 30 charts in one page and I am rendering them in ui-tabs.All the

Answer 1

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

• Make sure you set the height and width the style="width:100%;height:400px" (check out Invalid dimensions for plot, width = 0, height = 400 inside of hidden tab)
• 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)

Answer 2

You can move event to generate plot after tab is clicked - see this: JQuery onchange in tabs event

for example:

 $("#tabs").tabs({
    activate: function(event, ui) {
        function to generate plot...
    }
});

Answer 3

The div elements in inactive tabs are invisible and have no width or height until they are shown. This can cause problems with flot and the default practise here would be to render the graphs only when the tabs are shown.

One alternative would be to position the divs absolute out of the page, render the plot graphs and then move the divs into the tabs.