Flow Chart not working

Post Reply
ssmalisetty
Posts: 8
Joined: 06 Jun 2016, 09:44

29 Dec 2016, 14:11

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!

User avatar
aragorn
Posts: 2606
Joined: 29 Jun 2013, 12:38

30 Jan 2017, 08:53

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>

ssmalisetty
Posts: 8
Joined: 06 Jun 2016, 09:44

27 Feb 2017, 03:18

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)

User avatar
aragorn
Posts: 2606
Joined: 29 Jun 2013, 12:38

07 Mar 2017, 15:56

Sorry for my late reply, does it work without olympos?

ssmalisetty
Posts: 8
Joined: 06 Jun 2016, 09:44

25 Apr 2017, 16:36

No, I haven't tested without olympos.

User avatar
aragorn
Posts: 2606
Joined: 29 Jun 2013, 12:38

13 Jun 2017, 08:29

Could you please attach layout.js file in your Olympos version? I think you need to update your layout.js.

User avatar
aragorn
Posts: 2606
Joined: 29 Jun 2013, 12:38

13 Jun 2017, 08:40

it works fine for me with my above css;
Image

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest