Dynamic Flow Chart Library with CreateJS – flowjs

Category: Chart & Graph , Javascript | November 10, 2015
Author:bitterbit
Views Total:15,004 views
Official Page:Go to website
Last Update:November 10, 2015
License:MIT

Preview:

Dynamic Flow Chart Library with CreateJS – flowjs

Description:

flowjs is a JavaScript library built with CreateJS that allows you to render dynamic, animated flow charts using html5 canvas API.

How to use it:

Load CreateJS JavaScript library and other required resources in the html page.

<script src="lib/createjs-2015.05.21.min.js"></script>
<script src="src/flow.js"></script>
<script src="src/flowitem.js"></script>
<script src="src/flowconnector.js"></script>

Create an HTML5 canvas element on the html page.

<canvas id="demo" width="500" height="300"></canvas>

Create your own data for the flow chart.

var a = [ 
    [{id: "The Collector C", next: ["Groot"]}],
    [{id: "Groot", next: ["Peter Quill"]}],
    [{id: "Peter Quill", next: ["Drax"]}],
    [{id: "Drax", next: undefined}]
];

Draw a basic flow chart on the canvas element.

new flowjs("demo", a).draw();

 

You Might Be Interested In:


Leave a Reply