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

Created some screenshots from examples

css_transitions
josdejong 11 years ago
parent
5dbd9f0135
commit
fc0cff10c2
10 changed files with 26 additions and 16 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

Write Preview
Loading…
Cancel
Save