Visokio website     Downloads     Video tutorials     KnowledgeBase  
Content view: native browser not displaying D3 visualisation in mobile browser versions? - Visokio Forums
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?
    Attachments
    d3 browser test.iom 25K
  • 7 Comments
  • 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!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership