From 3894f2d72c04ab3d42500f336b0c03a3441c207f Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Tue, 4 Jun 2013 17:09:01 +0200
Subject: [PATCH] Added another Graph example

---
 examples/graph/15_custom_style.html | 119 ++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 examples/graph/15_custom_style.html
diff --git a/examples/graph/15_custom_style.html b/examples/graph/15_custom_style.html
new file mode 100644
index 00000000..ae06ed1f
--- /dev/null
+++ b/examples/graph/15_custom_style.html
@@ -0,0 +1,119 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Graph | Custom style</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../vis.js"></script>
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var options = null;
+        var graph = null;
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // create nodes
+            nodes = [
+                {id: 1, label: 'black node', group: 'black'},
+                {id: 2, label: 'black node', group: 'black'},
+                {id: 3, label: 'black node', group: 'black'},
+                {id: 4, label: 'red node', group: 'black', backgroundColor: 'red'},
+                {id: 5, label: 'gray node', group: 'gray'},
+                {id: 6, label: 'gray node', group: 'gray'},
+                {id: 7, label: 'gray node', group: 'gray'},
+                {id: 8, label: 'gray node', group: 'gray'},
+                {id: 9, label: 'image node', group: 'white'},
+                {id: 10, label: 'image node', group: 'white'},
+                {id: 11, label: 'default node'},
+                {id: 12, label: 'default node'}
+            ];
+
+            // create edges
+            edges = [
+                {from: 1, to: 2},
+                {from: 1, to: 3},
+                {from: 1, to: 4},
+                {from: 5, to: 6},
+                {from: 5, to: 7},
+                {from: 5, to: 8},
+                {from: 9, to: 10},
+                {from: 9, to: 11},
+                {from: 9, to: 12},
+
+                {from: 1, to: 5},
+                {from: 5, to: 9},
+                {from: 9, to: 1}
+            ];
+
+            // specify options
+            options = {
+                'width': '600px',
+                'height': '600px',
+                'stabilize': false,
+                'edges': {
+                    'length': 120,
+                    'width': 2,
+                    'style': 'arrow',
+                    'color': 'gray'
+                },
+                'nodes': {
+                    // default for all nodes
+                    'fontFace': 'times',
+                    'shape': 'circle',
+                    'borderColor': 'orange',
+                    'backgroundColor': 'yellow',
+                    'highlightColor': 'gold'
+                },
+                'groups': {
+                    'black': {
+                        // defaults for nodes in this group
+                        'radius': 15,
+                        'borderColor': 'black',
+                        'backgroundColor': 'black',
+                        'highlightColor': 'black',
+                        'fontColor': 'white',
+                        'fontSize': 18,
+                        'fontFace': 'courier',
+                        'shape': 'rect'
+                    },
+                    'gray': {
+                        'borderColor': 'black',
+                        'backgroundColor': 'gray',
+                        'highlightColor': 'gray',
+                        'fontSize': 18,
+                        'fontFace': 'arial',
+                        'shape': 'circle'
+                    },
+                    'white': {
+                        'borderColor': 'black',
+                        'backgroundColor': 'white',
+                        'highlightColor': 'white',
+                        'fontColor': 'red',
+                        'shape': 'image',
+                        'image': 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
+                    }
+                }
+            };
+
+            // create the graph
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            graph = new vis.Graph(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+<div id="mygraph"></div>
+</body>
+</html>
