Uncaught Invalid dimensions for plot, width = null

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 graphs are rendered perfectly and page is working fine.But still I am getting this error. I have used different div ids to all the graphs,height and width is given to all the divs. I am not able to find the solution since yesterday.I have included all the js required for the flot in the central page. Please help me in this regard.

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

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.

Answer 3

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