Question

I’ve been working on setting up a site that uses JQuery Mobile and Flot. The idea is that it can show graphs which you can swipe between.

So far I’ve got this: http://lasmit.co.uk/tmm-graphs/graph2.php

The first graph works fine, but if you swipe to the side the labels appear over the axis line and look off.

I’m sure I’m missing something obvious here so any help would be greatly appreciated.

Answer 1

Flot doesn’t work too well when you call $.plot on something that is currently not visible. Your best bet is going to be to move your page 2 and 3 graphs into pageshow events:

$('#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"] } });
});

I made a working example here: http://jsfiddle.net/ryleyb/yZuZb/