jQuery Mobile con flot y navegación AJAX

Estoy tratando de mostrar un gráfico generado flot en un proyecto jQuery Mobile. Si llamo a la página jQuery Mobile por su ruta absoluta (por ejemplo: http://server.com/graph/fancy.php) todo funciona bien, pero tan pronto como empiezo a usar la navegación AJAx integrada en jQM, el gráfico se ve codificado.jQuery Mobile con flot y navegación AJAX

También encontré este otro tema jquery mobile and flot library, pero ninguna de las soluciones descritas me funciona.

¿Hay alguna manera de conseguir que jQM y flot trabajen juntos? Desafortunadamente, deshabilitar AJAX tampoco es una opción.

La generación gráfico:

<script type="text/javascript"> 
var data = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
$(function() { 
    var plot = $.plot($("#chart"), [ 
     { 
      label: "Oh hai", 
      data: data, 
      bars: { show: true } 
     } 
    ]); 
}); 
</script> 
<div id="chart" style="width: 600px; height: 350px;"></div>

Fuente

2011-06-16 Max

Se puede publicar un ejemplo de http://jsfiddle.net/ por favor? – Jivings

Aquí tienes: http://jsfiddle.net/MT22y/5/ Ten en cuenta que en mi aplicación la página del gráfico está realmente en un archivo separado, pero el error sigue apareciendo de todos modos (fíjate en el eje y) – Max

Lo que necesita hacer es mover la función de trazado a un evento pageshow. Esto se debe a que flot no funciona bien dentro de los marcadores de posición que no son visibles. Trate de esta manera:

$('#graph').bind('pageshow', function() { 
    var plot = $.plot($("#chart"), [ 
     { 
     label: "Oh hai", 
     data: data, 
     bars: { 
      show: true 
     }} 
    ]); 
});

en acción aquí: http://jsfiddle.net/MT22y/8/

Fuente

2011-06-16 15:34:08 Ryley

Buena respuesta, no lo sabía. – Jivings

¡Ni yo tampoco, gracias! – Max

creo que es el mejor de simplemente reemplazando los estilos de los elementos gráficos. Por ejemplo, moví el gráfico hacia un lado agregando relleno: http://jsfiddle.net/MT22y/7/ para que no cubra más el eje.

Puede que necesite jugar un poco con los estilos y el ancho, pero este es probablemente el método más fácil.

Fuente

2011-06-16 11:46:01 Jivings

jQuery Mobile con flot y navegación AJAX

Respuesta

Cuestiones relacionadas