Browse Source

Created some screenshots from examples

css_transitions
josdejong 11 years ago
parent
commit
fc0cff10c2
10 changed files with 26 additions and 16 deletions
  1. +1
    -1
      examples/graph/04_shapes.html
  2. +1
    -1
      examples/graph/09_sizing.html
  3. +8
    -0
      examples/graph/10_multiline_text.html
  4. +4
    -1
      examples/graph/15_dot_language_playground.html
  5. +1
    -8
      examples/graph/graphviz/data/world.gv.txt
  6. +11
    -5
      examples/graph/graphviz/graphviz_gallery.html
  7. BIN
      examples/graph/graphviz/screenshots/fsm.png
  8. BIN
      examples/graph/graphviz/screenshots/hello.png
  9. BIN
      examples/graph/graphviz/screenshots/softmaint.png
  10. BIN
      examples/graph/graphviz/screenshots/traffic_lights.png

+ 1
- 1
examples/graph/04_shapes.html View File

@ -8,7 +8,7 @@
font: 10pt arial;
}
#mygraph {
width: 780px;
width: 100%;
height: 600px;
border: 1px solid lightgray;
}

examples/graph/09_automatic_sizing.html → examples/graph/09_sizing.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Automatic sizing</title>
<title>Graph | Sizing</title>
<style type="text/css">
html, body {

+ 8
- 0
examples/graph/10_multiline_text.html View File

@ -3,6 +3,14 @@
<head>
<title>Graph | Multiline text</title>
<style type="text/css">
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">

+ 4
- 1
examples/graph/15_dot_language_playground.html View File

@ -38,6 +38,9 @@
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
@ -52,7 +55,7 @@
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>Directed graph from data in DOT language</h1>
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>

+ 1
- 8
examples/graph/graphviz/data/world.gv.txt View File

@ -1,6 +1,5 @@
digraph world {
size="7,7";
/*
{rank=same; S8 S24 S1 S35 S30;}
{rank=same; T8 T24 T1 T35 T30;}
{rank=same; 43 37 36 10 2;}
@ -10,7 +9,7 @@ size="7,7";
{rank=same; 27 5 22 32 29 15;}
{rank=same; 6 23;}
{rank=same; 7;}
*/
S8 -> 9;
S24 -> 25;
S24 -> 27;
@ -25,10 +24,8 @@ size="7,7";
25 -> T1;
25 -> 26;
27 -> T24;
/*
2 -> {3 ; 16 ; 17 ; T1 ; 18}
10 -> { 11 ; 14 ; T1 ; 13; 12;}
*/
31 -> T1;
31 -> 32;
33 -> T30;
@ -41,9 +38,7 @@ size="7,7";
18 -> 29;
11 -> 4;
14 -> 15;
/*
37 -> {39 ; 41 ; 38 ; 40;}
*/
13 -> 19;
12 -> 29;
43 -> 38;
@ -56,10 +51,8 @@ size="7,7";
38 -> 4;
40 -> 19;
4 -> 5;
/*
19 -> {21 ; 20 ; 28;}
5 -> {6 ; T35 ; 23;}
*/
21 -> 22;
20 -> 15;
28 -> 29;

+ 11
- 5
examples/graph/graphviz/graphviz_gallery.html View File

@ -10,10 +10,10 @@
width: 600px;
}
html, body, select {
font: 11pt verdana;
font: 11pt arial;
}
#mygraph {
width: 600px;
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
@ -29,7 +29,7 @@
'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="../20_dot_language_playground.html" ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
'</p>');
}
@ -38,7 +38,11 @@
<p>
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
Note that vis.js does not support all attributes of Graphviz, and
</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>
@ -53,11 +57,13 @@
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<!-- TODO: get example world working (needs some extension of the DOT parser)
<option value="data/world.gv.txt">world</option>
-->
</select>
</p>
<div id="mygraph"></div>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');

BIN
examples/graph/graphviz/screenshots/fsm.png View File

Before After
Width: 894  |  Height: 593  |  Size: 69 KiB

BIN
examples/graph/graphviz/screenshots/hello.png View File

Before After
Width: 921  |  Height: 264  |  Size: 18 KiB

BIN
examples/graph/graphviz/screenshots/softmaint.png View File

Before After
Width: 1237  |  Height: 729  |  Size: 262 KiB

BIN
examples/graph/graphviz/screenshots/traffic_lights.png View File

Before After
Width: 1108  |  Height: 591  |  Size: 58 KiB

Loading…
Cancel
Save