Labels not getting placed properly over flot bar c

Question

I am developing an application using jquery mobile and flot charts.

In That i have 3 tabs. I am displaying my chart on the first tab.But the weird thing which is happening is that if i plot the graph in the first tab then my labels get misplaced.Here is the fiddle jsFiddle code

But if suppose i plot my graph in second or third tab then my charts are correct. My code is here jsfiddle code

why is this happening?

Answer 1

I got it. I just need to change plot.Offset() to plot.getPlotOffset() Then its working correctly.

offset() -- Returns the offset of the plotting area inside the grid relative to the document, useful for instance for calculating mouse positions (event.pageX/Y minus this offset is the pixel position inside the plot).

getPlotOffset() -- Gets the offset that the grid has within the canvas as an object with distances from the canvas edges as "left", "right", "top", "bottom". I.e., if you draw a circle on the canvas with the center placed at (left, top), its center will be at the top-most, left corner of the grid.

Answer 2

Seems like plotOffset calculation is different for your tabs and depends on whether container is visible or not. I think this is because jQuery can not calculate the height of the element which is hidden with display: none. In the first example plotOffset give you this numbers:

{left: 22, top: 41}

while for the second

{left: 7, top: 4}

When you then call ctx.translate(plotOffset.left, plotOffset.top); you will obviously have different lables position on the canvas.

The simpliest workaround is would be to normalize your translation with something like this:

ctx.translate(7, 3); // No need to care of plotOffset left and top

Use staticaly defined label margins instead of plotOffset values.

Updated demos:
http://jsfiddle.net/Sp8MP/5/
http://jsfiddle.net/Sp8MP/6/