jQuery Mobile with flot and AJAX navigation

Question

I am trying to display a flot generated chart in a jQuery Mobile project. If I call the jQuery Mobile page by its absolute path (sth. like: http://server.com/graph/fancy.php) everything works fine, but as soon as I start using the jQM integrated AJAx navigation the chart looks scrambled.

I also found this other topic jquery mobile and flot library, but none of the described solutions do work for me.

Is there a way to get jQM and flot working together? Unfortunatelly disabling AJAX is also not an option.

The chart generation:

<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>

Answer 1

I think you're best off just overriding the styles of the graph elements. For example I moved the graph to the side by adding padding: http://jsfiddle.net/MT22y/7/ so that it isn't covering the axis any more.

You might need to play with the styles and widths a bit, but this is probably the easiest method.

Answer 2

What you need to do is move your plot function into a pageshow event. This is because flot doesn't work well within placeholders that are not visible. Try it like this:

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

In action here: http://jsfiddle.net/MT22y/8/