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?
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/
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.
