Awesome Open Source
Awesome Open Source

FlowJS

Simple HTML5 flow chart using the canvas element.
FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas with the help of CreateJs.
No more complex graphs and endles zooming. Any contribution or suggestion will be welcomed

Visit https://prufer.surge.sh/ for a live demo! (using flowjs to display prufer trees)

Usage

flow chart example

<script type="text/javascript" src="lib/createjs-2015.05.21.min.js"></script>
<script type="text/javascript" src="flow.min.js"></script>
<canvas id="canvasID" width="500" height="300"></canvas>
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();

Advanced Usage

Here we show how to update a node after we draw it We simulate an app the loads data about the node in the background and when its ready, updates the displayed chart

flow chart loading example

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);
    }
}

License

flowjs is available under the MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,539,019
Chart (2,289
Html5 Canvas (525
Flowchart (180
Flowjs (11
Related Projects