Content view: native browser not displaying D3 visualisation in mobile browser versions?

CRead · April 14, 2015 8:28AM

See attached file. 2.9b1613x64

Ideally I'd like to use the built in browser, but I can't get my D3-based JavaScript charts to show in the browser versions for mobile devices. As a result, I'm using the external browser to render the Content Views.

With the native browser I can get output to show in the classic interface by clicking on the view's toolbar and choosing 'view in native browser' from the tools menu. However, pressing F12 to create the browser version for mobile devices results in the lower right view working, but the upper right view not working.

I've cut both views down to bare bones implementations, and I'm not seeing any errors. Is there something obvious I'm missing here?

maciej · April 14, 2015 9:41AM

The naming here may be a bit misleading, both built-in and native browsers are provided by Omniscope.

The difference is that one called "Built-in" is an old, legacy implementation of browser that does not provide many of modern browser features. I think it never got further than being HTML3 compliant. This means that it should not be used to do anything more sophisticated than displaying simple, static pages, images and links...as it might have difficulties to render SVGs correctly.

The Native browser is an integrated Chrome-like browser that is HTML5-compliant and should be used for D3 charts.

CRead · April 14, 2015 9:44AM

Hi Maciej,

I thought that was the case, but I still don't understand why the top right chart isn't working as it should - it works in classic, works if you load the view itself in a browser, but not through the mobile interface.

maciej · April 14, 2015 9:59AM

Hi,

It seems that is it caused by position of script tag in your markup.
In the first case, your script tag is placed outside of head or body so your file looks as follows:

<html>
   <head> (...) </head>
   <body> (...) </body>
   <script> (...) </script>
</html>

In the second (working) case, it is:

<html>
   <head> (...) </head>
   <body>
      (...)
      <script> (...) </script>
   </body>
</html>

Moving the script tag to be inside of body in the first chart fixes the issue.

Edit:
Just to further clarify, this is caused by Omniscope when in Mobile mode. To avoid some cross-browser issues we only allow body and head tags inside of html tag in content view and we remove any other text between html tags. That is why it works in desktop version, as well as when you render your markup separately (since it is a valid markup), but not in Mobile.

CRead · April 14, 2015 10:43AM

Thanks Maciej, that fixed it. Not something I'd have thought to try.

Is there anything comparable to a console / developer & debugging interface for Omni mobile to alert for such things? I'm mostly developing in plain HTML/JS with Chrome and then inserting the template into Omniscope, otherwise there's no efficient way to debug it.

maciej · April 14, 2015 1:12PM

Hi Colin,

If your license includes web sharing, you can open the link from "Settings > Web Sharing > Viewing link" in external browser and debug it directly through browser's developer tools.

jenifercolt · May 11, 2015 9:06AM

Hi, I don’t know the exact solution for it, but In our office, we generally prefer koolchart for javascript charts, HTML 5 charts, Pie charts etc. http://www.koolchart.com

steve · May 12, 2015 1:26AM

Colin, when using the native embedded browser, you can open the equivalent of Chrome's dev console using Ctrl+Alt+Shift+F12 (e.g. while on the welcome screen or with something other than the native browser focused) to open the Omniscope dev console, then choosing Browser dev tools. You must first have enabled this in Settings > Advanced > Browser.

Welcome!

Categories

Ideas Parade

Tagged