vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

138 lines
6.3 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
<link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#network{
width: 1200px;
height: 800px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h1>Network Test</h1>
<div id="network"></div>
<script>
var nodes = new vis.DataSet([
{"id":317,"label":"Start - BTN\n317\nSection","x":-817,"y":-24,"group":"Section"},
{"id":318,"label":"End Call\n318\nHangup","x":-933,"y":-175,"group":"Hangup"},
{"id":319,"label":"Call Error\n319\nSpeak","x":-727,"y":-175,"group":"Speak"}, {"id":320,"label":"Welcome\n320\nSpeak","x":-563,"y":-14,"group":"Speak"},
{"id":321,"label":"Enter TN\n321\nPrompt","x":-326,"y":-7,"group":"Prompt"},
{"id":322,"label":"CheckIsTenDigits\n322\nWebService","x":-84,"y":-5,"group":"WebService"},
{"id":323,"label":"VerifyIsTenDigits\n323\nCase","x":207,"y":-4,"group":"Case"},
{"id":324,"label":"CheckIsValidTN\n324\nWebService","x":492,"y":-10,"group":"WebService"},
{"id":325,"label":"Not Ten Digits\n325\nSpeak","x":-76,"y":-274,"group":"Speak"},
{"id":326,"label":"VerifyIsValidTN\n326\nCase","x":821,"y":-9,"group":"Case"},
{"id":327,"label":"Verify TN Is Correct\n327\nPrompt","x":812,"y":265,"group":"Prompt"},
{"id":328,"label":"Not Valid TN\n328\nSpeak","x":499,"y":-210,"group":"Speak"},
{"id":329,"label":"BTN Is Valid\n329\nSpeak","x":812,"y":397,"group":"Speak"},
{"id":330,"label":"Validate TPV ID\n330\nSection","x":708,"y":592,"group":"Section"},
{"id":331,"label":"End Section End Call\n331\nHangup","x":1040,"y":478,"group":"Hangup"},
{"id":332,"label":"Say BTN\n332\nSpeak","x":820,"y":113,"group":"Speak"},
{"id":333,"label":"Get TPV ID\n333\nWebService","x":800,"y":824,"group":"WebService"},
{"id":334,"label":"TPV ID Error\n334\nSpeak","x":1037,"y":682,"group":"Speak"},
{"id":335,"label":"Verify TPV ID Is Valid\n335\nCase","x":798,"y":1059,"group":"Case"},
{"id":336,"label":"TPV ID Is valid\n336\nSpeak","x":802,"y":1304,"group":"Speak"},
{"id":337,"label":"End Call\n337\nSection","x":828,"y":1605,"group":"Section"},
{"id":338,"label":"TPV ID Not Found\n338\nSpeak","x":1211,"y":1055,"group":"Speak"},
{"id":339,"label":"TPV ID End Call\n339\nHangup","x":1074,"y":1616,"group":"Hangup"}
]);
var edges = new vis.DataSet([
{"id":353,"from":317,"to":318,"label":"Hangup"},{"id":354,"from":317,"to":318,"label":"CcHangup"},{"id":355,"from":317,"to":319,"label":"Error"},{"id":356,"from":319,"to":318,"label":"Continue"},{"id":357,"from":319,"to":318,"label":"Error"},{"id":358,"from":319,"to":318,"label":"Hangup"},{"id":359,"from":317,"to":320,"label":"Continue"},{"id":360,"from":320,"to":321,"label":"Continue"},{"id":361,"from":321,"to":322,"label":"1"},{"id":362,"from":322,"to":323,"label":"Continue"},{"id":363,"from":323,"to":324,"label":"1"},{"id":364,"from":323,"to":325,"label":"2"},{"id":365,"from":325,"to":321,"label":"Continue"},{"id":366,"from":324,"to":326,"label":"Continue"},{"id":367,"from":326,"to":332,"label":"1"},{"id":368,"from":326,"to":328,"label":"2"},{"id":369,"from":327,"to":332,"label":"3"},{"id":370,"from":327,"to":321,"label":"2"},{"id":371,"from":328,"to":321,"label":"Continue"},{"id":372,"from":327,"to":329,"label":"1"},{"id":373,"from":329,"to":330,"label":"Continue"},{"id":374,"from":330,"to":333,"label":"Continue"},{"id":375,"from":330,"to":331,"label":"Hangup"},{"id":376,"from":332,"to":327,"label":"Continue"},{"id":377,"from":330,"to":334,"label":"Error"},{"id":378,"from":334,"to":331,"label":"Continue"},{"id":379,"from":333,"to":335,"label":"Continue"},{"id":380,"from":335,"to":336,"label":"1"},{"id":381,"from":336,"to":337,"label":"Continue"},{"id":382,"from":335,"to":338,"label":"0"},{"id":383,"from":338,"to":337,"label":"Continue"},{"id":384,"from":337,"to":339,"label":"Continue"}
]);
var container = document.getElementById('network');
var data = {
edges: edges,
nodes: nodes
};
var options = {
manipulation: {
initiallyActive: true,
addNode: true,
addEdge: true,
editEdge: true,
deleteNode: true,
deleteEdge: true
},
nodes: {
physics: false,
},
edges: {
physics: false,
arrows: 'to',
smooth: {
enabled: true,
type: 'continuous'
}
},
interaction: {
dragNodes: true,
dragView: true,
hover: true,
keyboard: {
enabled: true,
bindToWindow: false
},
navigationButtons: true,
selectable: true,
selectConnectedEdges: true,
hoverConnectedEdges: true,
zoomView: true
},
groups: {
Assignment: {
shape: 'box',
color: '#6699ff'
},
Hangup: {
shape: 'box',
color: '#b8b8b8'
},
Prompt: {
shape: 'box',
color: '#00ffff'
},
Section: {
shape: 'circle',
color: '#66ff66'
},
Speak: {
shape: 'box',
color: '#ffff66'
},
StartRecording: {
shape: 'box',
color: '#ff5050'
},
StopRecording: {
shape: 'box',
color: '#ff5050'
},
Transfer: {
shape: 'box',
color: '#ff66ff'
},
TransferAgent: {
shape: 'box',
color: '#ff9900'
},
Case: {
shape: 'box',
color: '#33cccc'
},
WebService: {
shape: 'box',
color: '#33cc33'
}
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>