var graph = new flowjs.DiGraph();
graph.addPaths([
    ["Peter Q", "Gamora", "Nova Prime", "Rocket"],
    ["Drax", "Groot", "Rocket"],
    ["Merdith Q", "Groot"]
]);

new flowjs.DiFlowChart("canvasID", graph).draw();

var graph = new flowjs.DiGraph();
// ... init the graph
new flowjs.DiFlowChart(graph, "canvasID").draw();


// this function simulates loading a flow chart and coloring parts of it
// we simulate loading using the setTimeout function 
function simuLoad(flowChart, graph){
    // helps walk over all the graphs nodes
    var walker = new flowjs.GraphWalker(graph);
    
    walker.forEach(function(node){
        var start = Math.random() * 1000 * 5;
        var dur = Math.random() * 1000 * 5;
        simulateLoading(node.id, start);
        simulateDoneLoading(node.id, start + dur);
    }, this);
    
    
    // start running an animation on the given iten
    function simulateLoading(itemId, timeout){
        setTimeout(function(){
            flowChart.updateItem(itemId, function(item){
                item.flowItem.toggleFlashing();
            });
        }, timeout);
        
    }
    
    // stop the animation on the item and color it
    function simulateDoneLoading(itemId, timeout){
        setTimeout(function(){
            flowChart.updateItem(itemId, function(item){
                item.flowItem.toggleFlashing();
                item.flowItem.color = "cyan";
                if (item.connectors === undefined){return;}
                item.connectors.forEach(function(conn){
                   conn.color = "cyan"; 
                });
            });
        }, timeout);
    }
}