A Great bit of code - I need a little help

[Phil Robins]

I have been using the great code you've written to build an app that allows the user to dynamically build up a flowchart. The connector div omits a data-bind and I need to be able to colour the line depending on a couple of factors. The backgroundColor of the Div cannot be set either. I've like to add a 4th element to the connector class so that it looks like connector blocka blockb failSuccess - I then colour the line depending on the 4th value - is this quick and easy to do - can you give me some pointers - I have managed to change the color of course but I need the colour to depend on each line/connector? Much appreciated in advance....

[Tobias Koller]

hi, i just needed the same thing :)

I made it like this:

1 - Modify the the js-graph-it as followed (add this at line 750 - this.connectorClass is only for orienation)

this.connectorClass = splitted[0] + ' ' + splitted[1] + ' ' + splitted[2];

//this is just a function-name you can choose. 
        if(OnInitConnection){
            OnInitConnection(this);
        }

this will allow you to call a method from another JS-File. in this case i choose the name OnInitConnection which is defined in my js-files.

2 - implement OnInitConnection in any of your referenced js-files.

function OnInitConnection(connectionObject){
    var c = connectionObject;
    //will allow your own classes on the connection-div
    c.connectorClass = c. htmlElement.className;

    //may change the size(thickness) of the connection.
    c.size = 5;
}

3 - define a css-class to set the background

.connection-success{
    background-color: green;
}

.connection-error{
    background-color: red;
}

4 - add this class too your connection as needed

<div class="connector step_1 step_2 connection-success" ></div> 
<div class="connector step_2 step_3 connection-error"></div> 
<div class="connector step_3 step_4 connection-success"></div> 

please be sure to place your css below the js-graph-it.css.

<link rel="stylesheet" type="text/css" href="js-graph-it.css" />
<link rel="stylesheet" type="text/css" href="shapes.css" />

that's it :)