javascriptjsfprimefacesvivagraphjs

js script in xhtml page launched but result not visible

This is a JSF 2.3, Primefaces 10 project.

The file vivagraph.js is downloaded from here, it is included in the project like so:

screenshot of file organization

The xhtml page:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>VivaGraphJs test page</title>
        <h:outputScript name="js/vivagraph.js" />
        <script type='text/javascript'>
            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        </script>
    </h:head>
    <h:body onload="onLoad()">

    </h:body>
</html>

Note: this is adapted from the basic example on the Vivagraph.js wiki.

When the page loads, it remains blank. I would expect to see a graph with the 2 nodes "space" and "bar" connected with a link. The console prints "test print", shows no error.

The generated html if this helps:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/theme.css.html?ln=primefaces-saga&amp;v=10.0.0" /><link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/primeicons/primeicons.css.html?ln=primefaces&amp;v=10.0.0" />
        <title>VivaGraphJs test page</title>
    </head>
    <body onload="onLoad()">
        <script type="text/javascript" src="/nocodeapp-web-front/javax.faces.resource/js/vivagraph.js.html">
        </script>
        <script id="6c6d9708-4b65-4406-a8e0-d8c24b8afb86" type="text/javascript">
        var pf=window.PrimeFaces;if(pf){pf.settings.locale='fr_FR';pf.settings.viewId='/cowo/graph.xhtml';pf.settings.contextPath='/nocodeapp-web-front';pf.settings.cookiesSecure=false;pf.settings.partialSubmit=true;};

            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        ;if(window.$){$(PrimeFaces.escapeClientId("6c6d9708-4b65-4406-a8e0-d8c24b8afb86")).remove();}
        </script>
    </body>
</html>
Solution

  • The solution is to add this script at the bottom of the xhtml page:

    <style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>