Page 1 of 1

Flow Chart not working

Posted: 29 Dec 2016, 14:11
by ssmalisetty
Hi,

I am trying to generate a flowchart in my app. I tried out the code from the demo site.. Line/connection between elements are not showing up, only elements are showing up.
using olympos 1.1.3 and PF 6.0.11.

Thanks for your help!

Re: Flow Chart not working

Posted: 30 Jan 2017, 08:53
by aragorn
Sorry for my late reply. Please try the following css;

Code: Select all

<style type="text/css">
    .ui-diagram-element {	
        width:14em; 
        height:4em; 	
        line-height:4em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
        border-radius: 4px;
        border: 1px solid transparent;
        background-color: #98AFC7;
        color: #ffffff;
    }

    .ui-diagram-success {
        background-color: #9CB071;
        color: #ffffff;
        border-color: #7ab02c;
    }

    .ui-diagram-fail {
        background-color: #C34A2C;
        color: #ffffff;
    }

    .flow-label {
        font-size: 24px;
        font-weight: bold;
        color: #816A51;
    }
</style>
Exp page;

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">



    <ui:define name="content">

        <div class="Container100">
            <div class="Card TexAlCenter">

                <p:diagram value="#{diagramFlowChartView.model}" style="height:600px" styleClass="ui-widget-content" />

            </div>
        </div>

    </ui:define>

</ui:composition>

Re: Flow Chart not working

Posted: 27 Feb 2017, 03:18
by ssmalisetty
Thanks, But it is still not working.
I am getting below error in my console:

Code: Select all

core.js.xhtml?ln=primefaces&v=6.0.12:1 Widget not available: Olympos
core.js.xhtml?ln=primefaces&v=6.0.12:1 Widget not available: Olympos
diagram.js.xhtml?ln=primefaces&v=6.0.12:1 TypeError: Cannot read property 'parentNode' of null
    at r.endpointAdded (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at aD (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at I.jsPlumbInstance.addEndpoint (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at c.initEndPoints (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at diagram.js.xhtml?ln=primefaces&v=6.0.12:1
    at I.jsPlumbInstance.batch (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at I.jsPlumbInstance.<anonymous> (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at I.jsPlumbInstance.fire (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at I.jsPlumbInstance.<anonymous> (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)
    at c (diagram.js.xhtml?ln=primefaces&v=6.0.12:1)

Re: Flow Chart not working

Posted: 07 Mar 2017, 15:56
by aragorn
Sorry for my late reply, does it work without olympos?

Re: Flow Chart not working

Posted: 25 Apr 2017, 16:36
by ssmalisetty
No, I haven't tested without olympos.

Re: Flow Chart not working

Posted: 13 Jun 2017, 08:29
by aragorn
Could you please attach layout.js file in your Olympos version? I think you need to update your layout.js.

Re: Flow Chart not working

Posted: 13 Jun 2017, 08:40
by aragorn
it works fine for me with my above css;
Image

Test codes; https://www.primefaces.org/showcase/ui/ ... hart.xhtml