From 764177417d9b27468fc86b0cd0da61683ca86938 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Tue, 13 Jan 2015 17:58:23 +0100
Subject: [PATCH] added example 36, html in nodes

---
 examples/network/36_HTML_in_Nodes.html | 80 ++++++++++++++++++++++++++
 examples/network/index.html            |  1 +
 2 files changed, 81 insertions(+)
 create mode 100644 examples/network/36_HTML_in_Nodes.html
diff --git a/examples/network/36_HTML_in_Nodes.html b/examples/network/36_HTML_in_Nodes.html
new file mode 100644
index 00000000..00dad583
--- /dev/null
+++ b/examples/network/36_HTML_in_Nodes.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Images</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+            background-color:#eeeeee;
+        }
+
+    </style>
+
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+
+        var DIR = 'img/refresh-cl/';
+        var LENGTH_MAIN = 150;
+        var LENGTH_SUB = 50;
+
+
+        var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' +
+                '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
+                '<foreignObject x="15" y="10" width="100%" height="100%">' +
+                '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
+                '<em>I</em> like' +
+                '<span style="color:white; text-shadow:0 0 20px #000000;">' +
+                'cheese</span>' +
+                '</div>' +
+                '</foreignObject>' +
+                '</svg>';
+
+        var DOMURL = window.URL || window.webkitURL || window;
+
+        var img = new Image();
+        var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
+        var url = DOMURL.createObjectURL(svg);
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // Create a data table with nodes.
+            nodes = [];
+
+            // Create a data table with links.
+            edges = [];
+
+            nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
+            nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
+            edges.push({from: 1, to: 2, length: 300});
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                stabilize: false,
+                smoothCurves:false
+            };
+            network = new vis.Network(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+
+<div id="mynetwork"></div>
+</body>
+</html>
diff --git a/examples/network/index.html b/examples/network/index.html
index 392b6b6c..7f15929f 100644
--- a/examples/network/index.html
+++ b/examples/network/index.html
@@ -47,6 +47,7 @@
   <p><a href="33_animation.html">33_animation.html</a></p>
   <p><a href="34_circular_images.html">34_circular_images.html</a></p>
   <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
+  <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>
