jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Reworked the dot language playground and merged with the graphviz gallery

flowchartTest
jos 9 years ago
parent
c817962b35
commit
d82973769c
23 changed files with 276 additions and 328 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -219
      examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html
  2. +23
    -0
      examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt
  3. +19
    -0
      examples/network/categories/data/dotLanguage/data/computer_network.gv.txt
  4. +15
    -0
      examples/network/categories/data/dotLanguage/data/simple.gv.txt
  5. +22
    -0
      examples/network/categories/data/dotLanguage/dotLanguage.html
  6. +195
    -0
      examples/network/categories/data/dotLanguage/dotPlayground.html
  7. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt
  8. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt
  9. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt
  10. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png
  11. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png
  12. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
  13. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
  14. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt
  15. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt
  16. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt
  17. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt
  18. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt
  19. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt
  20. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt
  21. +0
    -23
      examples/network/categories/data/dot_language.html
  22. +0
    -86
      examples/network/graphviz/graphviz_gallery.html
  23. +2
    -0
      lib/network/dotparser.js

+ 0
- 219
examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html View File

@ -1,219 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#mynetwork {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="drawExample('example1')">
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>
<a href="javascript: drawExample('example3')">example 3</a>
</div>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data"></textarea>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var network = null;
var data = null;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
// parse and draw the data
function draw () {
destroy();
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
barnesHut: {
springLength: 200
}
}
};
network = new vis.Network(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
}
/**
* Draw an example
* @param {String} id HTML id of the textarea containing the example code
*/
function drawExample(id) {
txtData.value = document.getElementById(id).value;
draw();
}
</script>
<textarea id="example1" class="example">
digraph {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontColor=white,
color=red,
]
}
</textarea>
<textarea id="example2" class="example">
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}
</textarea>
<textarea id="example3" class="example">
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}
</textarea>
</body>
</html>

+ 23
- 0
examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt View File

@ -0,0 +1,23 @@
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}

+ 19
- 0
examples/network/categories/data/dotLanguage/data/computer_network.gv.txt View File

@ -0,0 +1,19 @@
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}

+ 15
- 0
examples/network/categories/data/dotLanguage/data/simple.gv.txt View File

@ -0,0 +1,15 @@
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}

+ 22
- 0
examples/network/categories/data/dotLanguage/dotLanguage.html View File

@ -0,0 +1,22 @@
<html>
<head>
<title>Network | DOT Language</title>
<script src="../../../../../dist/vis.js"></script>
<link href="../../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../../googleAnalytics.js"></script>
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var dot = 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var data = vis.network.convertDot(dot);
var network = new vis.Network(container, data);
</script>
</body>
</html>

+ 195
- 0
examples/network/categories/data/dotLanguage/dotPlayground.html View File

@ -0,0 +1,195 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../../dist/vis.js"></script>
<link href="../../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#mynetwork {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
}
</style>
<script src="../../../../googleAnalytics.js"></script>
</head>
<body>
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<p id="warning" style="color: red; display: none;">
Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.
</p>
<script>
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
</script>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style="margin-left: 30px;">
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</sup></a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">gallery of GraphViz</a>.
</p>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data">
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
$('button.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$(window).load(draw);
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
// parse and draw the data
function draw () {
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = vis.network.convertDot(txtData.value);
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
}
</script>
</body>
</html>

examples/network/graphviz/data/fsm.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt View File


examples/network/graphviz/data/hello.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt View File


examples/network/graphviz/data/process.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt View File


examples/network/graphviz/screenshots/fsm.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png View File


examples/network/graphviz/screenshots/hello.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png View File


examples/network/graphviz/screenshots/softmaint.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png View File


examples/network/graphviz/screenshots/traffic_lights.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png View File


examples/network/graphviz/data/siblings.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt View File


examples/network/graphviz/data/softmaint.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt View File


examples/network/graphviz/data/traffic_lights.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt View File


examples/network/graphviz/data/transparency.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt View File


examples/network/graphviz/data/twopi2.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt View File


examples/network/graphviz/data/unix.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt View File


examples/network/graphviz/data/world.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt View File


+ 0
- 23
examples/network/categories/data/dot_language.html View File

@ -1,23 +0,0 @@
<html>
<head>
<title>Network | DOT Language</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var network = new vis.Network(container, data);
</script>
</body>
</html>

+ 0
- 86
examples/network/graphviz/graphviz_gallery.html View File

@ -1,86 +0,0 @@
<html>
<head>
<title>Network | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<style type="text/css">
p {
width: 600px;
}
html, body, select {
font: 11pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<script>
if (location.href.substr(0, 5) == 'file:') {
document.write(
'<p style="color: red;">' +
'Error: Cannot fetch the example data because of security ' +
'restrictions in JavaScript. Run the example from a server ' +
'instead of as a local file to resolve this problem. ' +
'Alternatively, you can load DOT graphs in ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
'</p>');
}
</script>
<p>
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
</p>
<p>
Note that some style attributes of Graphviz are not supported by vis.js,
and that vis.js offers options not supported by Graphviz (which could make
some examples look much nicer).
</p>
<p>
<label for="url">Select an example:</label>
<select id="url" onchange="loadData()">
<option value="data/fsm.gv.txt">fsm</option>
<option value="data/hello.gv.txt">hello</option>
<option value="data/process.gv.txt">process</option>
<option value="data/siblings.gv.txt">siblings</option>
<option value="data/softmaint.gv.txt">softmaint</option>
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<option value="data/world.gv.txt">world</option>
</select>
</p>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
function loadData () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
network.setOptions({
stabilize: false
});
network.setData( {
dot: data
});
});
}
loadData();
</script>
</body>
</html>

+ 2
- 0
lib/network/dotparser.js View File

@ -4,6 +4,8 @@
* *
* DOT language reference: http://www.graphviz.org/doc/info/lang.html * DOT language reference: http://www.graphviz.org/doc/info/lang.html
* *
* DOT language attributes: http://graphviz.org/content/attrs
*
* @param {String} data Text containing a graph in DOT-notation * @param {String} data Text containing a graph in DOT-notation
* @return {Object} graph An object containing two parameters: * @return {Object} graph An object containing two parameters:
* {Object[]} nodes * {Object[]} nodes

Write Preview
Loading…
Cancel
Save