Multigraph not displaying correctly on Android

Having upgraded to V5, I have a problem displaying a multigraph in a dashboard on my Android device - 4.1.1 using the stock Android browser.

If I clear the browser cache, it loads correctly.  However, if I then refresh the screen, the page loads, but the multigraph does not appear.  This is repeatable every time I have tried it.  This was not a problem in V4.  Everything appears to be OK on my desktop (IE 10).

I notice that the spacing of the black menu bar at the top seems to be different - it seems to be narrower than before?

Can anyone help with this please?

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

Does anyone have any pointers as to what might be causing this please?

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

I have a clue:  the problem seems to only occur when I use a wi-fi connection.  If I use a 3G connection (which is presumably slower), the graph displays correctly.  I am guessing that this means that there is a timing issue somewhere?  Any ideas?

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

I'm still struggling with this and don't really have any pointers.  Here is the dashboard that doesn't display when refreshed:

http://emoncms.org/engeeaitch  

Does anyone have any suggestions please?

TrystanLea's picture

Re: Multigraph not displaying correctly on Android

Hello engeeaitch, I can confirm it loads first time and then for me a refresh crashes the page and the browser exits. Are you viewing it on a tablet? its a wide dashboard for a phone?!

TrystanLea's picture

Re: Multigraph not displaying correctly on Android

I can also confirm it crashes on one of my own multigraphs and at a smaller size.

Mattia Rossi's picture

Re: Multigraph not displaying correctly on Android

Checked with the android debugger, this is the log on page refresh:

 

05-22 13:50:26.498  2337  2337 E browser : Console: Uncaught ReferenceError: jQuery is not defined http://mydomain/emoncms/Lib/flot/jquery.flot.min.js:27
05-22 13:50:26.545  2337  2337 E browser : Console: Uncaught ReferenceError: jQuery is not defined http://mydomain/emoncms/Lib/flot/jquery.flot.selection.min.js:79
05-22 13:50:26.545  2337  2337 E browser : Console: Uncaught ReferenceError: jQuery is not defined http://mydomain/emoncms/Lib/flot/jquery.flot.time.min.js:424
05-22 13:50:26.545  2337  2337 E browser : Console: Uncaught ReferenceError: $ is not defined http://mydomain/emoncms/vis/multigraph?embed=1&mid=1:46

 

Adding 

<script type="text/javascript" src="<?php echo $path;?>/Lib/jquery-1.9.1.min.js"></script>

in vis/visualizations/multigraph.php on line 16 (before the other jquery includes) fixes the error, the graph is still displayed with full width, but it is better than nothing.

It does not happen with chrome as far as I can tell, so it must be a problem specific to the android browser. Adding the jquery reference does not break the visualization on my main pc, as far as I can tell

 

Regards

Mattia Rossi's picture

Re: Multigraph not displaying correctly on Android

on a second thought, maybe adding 

<?php if ($embed) { ?>
<script type="text/javascript" src="<?php echo $path;?>/Lib/jquery-1.9.1.min.js"></script>
<?php } ?>

instead of including it even when not embedding it in an Iframe would be better ...

TrystanLea's picture

Re: Multigraph not displaying correctly on Android

Thanks a lot Mattia, how do you get the android debugger?

<script type="text/javascript" src="<?php echo $path;?>/Lib/jquery-1.9.1.min.js"></script>

is defined in Theme/embed.php which is the theme that anything that is embedded is wrapped in. I wonder how its missing that reference?

I thought Id sorted this issue before by using a slightly older version of jquery but it seems to be affecting all visualization types, strange.

Mattia Rossi's picture

Re: Multigraph not displaying correctly on Android

Hi Trystan

you have to connect the phone to a pc with the usb cable, enable usb debugging on the phone, and then run (after installing the android sdk)

adb logcat (for all logs)

or 

adb logcat -s "browser"

to filter only browser related messages

You can then read all the messages that would normally be output on the browser console

and if I check from a real browser, when I hit refresh I can see that jquery is loaded corerctly even without the hack .... the only thing that comes to mind is that there's a bug in the android browser that prevents it to load the jquery lib when it is included in the headers .... or that because of some race condition the other scripts are loaded and evaluated before it ... running a quick  google search did not turn up any meaningful answer though ... I guess it should be a fairly common problem though ...

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

Hi all - thanks for your efforts.  I am using this on a mobile phone - landscape.  It serves my purpose well (when it works). So is there a recommended solution?  Just a reminder - I don't think that this was a problem in emoncms V4.

Nick

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

Hi - just wondering if there was any chance of a fix for this please?

 

Nick

Mattia Rossi's picture

Re: Multigraph not displaying correctly on Android

Hi Nick,

I thought it was already evident from the previous posts ... anyway ... until Trystan commits a fix on the main emoncms code tree, you'll have either to use another browser (if your phone supports it I'd go with Chrome) or edit emoncms / Modules / vis / visualisations / multigraph.php and add on line 16 these lines:

<?php if ($embed) { ?>
<script type="text/javascript" src="<?php echo $path;?>/Lib/jquery-1.9.1.min.js"></script>
<?php } ?>

This should fix the problem (that apparently is in the android browser, not emoncms ....

 

Regards

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

Hi - thanks for the reply.

I have added this fix to my local copy of emoncms, but it doesn't seem to make any difference.  I did a bit of looking around using Chrome Inspect Element on the desktop to make sure that I had added the lines correctly - I think that there should not be a / before the Lib directory?  With the forward slash removed, the line appeared OK in the browser on the desktop, but on testing on Android, the problem was still there - i.e. if I clear the cache, it loads fine, but then on doing a refresh, the graph does not load.

Any ideas as to where to go next?

Nick

engeeaitch's picture

Re: Multigraph not displaying correctly on Android

If anyone's interested - this problem went away with the upgrade to Android 4.2.2