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
});
});
|
Author: Pranav Singh
