¿Por qué mis etiquetas Flot y axis aparecen sobre el eje? JQM

Question

He estado trabajando en la configuración de un sitio que usa JQuery Mobile y Flot. La idea es que puede mostrar gráficos que puedes deslizar entre ellos.

Hasta ahora lo he entendido: http://lasmit.co.uk/tmm-graphs/graph2.php

El primer gráfico funciona bien, pero si usted pasa al lado aparecen las etiquetas sobre la línea del eje y mirar fuera.

Estoy seguro de que me falta algo obvio aquí, así que cualquier ayuda sería muy apreciada.

Answer 1

Flot no funciona demasiado bien cuando llama al $.plot en algo que no está visible actualmente. Su mejor apuesta va a ser para mover su página 2 y 3 gráficos en pageshow eventos:

$('#device2').bind('pageshow',function(){  
    $.plot($("#total-inches-graph"), 
    [{ color: "rgb(14, 91, 173)", label: 'Total Measurements', data: totalInchesArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } }); 
}); 

$('#device3').bind('pageshow',function(){  
    $.plot($("#weight-graph"), 
    [{ color: "rgb(32, 140, 47)", label: 'Weight', data: weightArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } }); 
}); 

hice un ejemplo de trabajo aquí: http://jsfiddle.net/ryleyb/yZuZb/

Answer 2

Parece que hay un problema con el deslizamiento, ya que la trama se representa correctamente cuando se accede directamente a una página, por ejemplo, abra la siguiente URL: http://lasmit.co.uk/tmm-graphs/graph2.php#device2, pero las demás páginas se representan incorrectamente.

Establece el tamaño de los elementos DIV, ¿puede intentar establecer también el tamaño exacto de las parcelas?