Recent news

Friday, 3 June 2016

Jquery.flowchart : JQuery Plugin To Draw Flow Chart




jQuery flowchart is an open source jquery plugin which help you to create a flowchart at client side in your application. This will help you to manipulate the create chart into Json data format.


How To Use

1. Add the below library reference

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery.panzoom/dist/jquery.panzoom.min.js"></script>
<script src="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<script src="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.js"></script>
<script src="http://sebastien.drouyer.com/jquery.flowchart-demo/javascripts/main.js"></script>
<link rel="stylesheet" href="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.min.css">


2. Now add the below html tag.

<div id="divFlowchart"></div>


3. Add the below code to perform operation

  $(document).ready(function () {
        var data = {
            operators: {
                operator1: {
                    top: 20,
                    left: 20,
                    properties: {
                        title: 'Operator 1',
                        inputs: {},
                        outputs: {
                            output_1: {
                                label: 'Output 1',
                            }
                        }
                    }
                },
                operator2: {
                    top: 80,
                    left: 300,
                    properties: {
                        title: 'Operator 2',
                        inputs: {
                            input_1: {
                                label: 'Input 1',
                            },
                            input_2: {
                                label: 'Input 2',
                            },
                        },
                        outputs: {}
                    }
                },
            },
            links: {
                link_1: {
                    fromOperator: 'operator1',
                    fromConnector: 'output_1',
                    toOperator: 'operator2',
                    toConnector: 'input_2',
                },
            }
        };

        // Apply the plugin on a standard, empty div...
        $('#divFlowchart).flowchart({
            data: data,
            canUserEditLinks: false,
            canUserMoveOperators: false
        });
    });



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles