diff --git a/examples/graph/08_selections.html b/examples/graph/07_selections.html
similarity index 100%
rename from examples/graph/08_selections.html
rename to examples/graph/07_selections.html
diff --git a/examples/graph/08_mobile_friendly.html b/examples/graph/08_mobile_friendly.html
new file mode 100755
index 00000000..96bca679
--- /dev/null
+++ b/examples/graph/08_mobile_friendly.html
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Graph | Mobile friendly</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #mygraph {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+
+    <!-- for mobile devices like android and iphone -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <script type="text/javascript" src="../../vis.js"></script>
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var graph = null;
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            nodes = [];
+            edges = [];
+            var EDGE_LENGTH = 50;
+            var connectionCount = [];
+
+            // randomly create some nodes
+            var nodeCount = 20;
+            var cols = parseInt(Math.sqrt(nodeCount));
+            for (var i = 0; i < nodeCount; i++) {
+                nodes.push({
+                    id: i,
+                    label: '' + i
+                });
+
+                connectionCount[i] = 0;
+
+                // create links in a scale-free-network way
+                if (i == 1) {
+                    var from = i;
+                    var to = 0;
+                    edges.push({
+                        from: from,
+                        to: to,
+                        length: EDGE_LENGTH
+                    });
+                    connectionCount[from]++;
+                    connectionCount[to]++;
+                }
+                else if (i > 1) {
+                    var conn = edges.length * 2;
+                    var rand = Math.floor(Math.random() * conn);
+                    var cum = 0;
+                    var j = 0;
+                    while (j < connectionCount.length && cum < rand) {
+                        cum += connectionCount[j];
+                        j++;
+                    }
+
+                    var from = i;
+                    var to = j;
+                    edges.push({
+                        from: from,
+                        to: to,
+                        length: EDGE_LENGTH
+                    });
+                    connectionCount[from]++;
+                    connectionCount[to]++;
+                }
+            }
+
+            // Create a graph
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                stabilize: false,
+                nodes: {
+                    shape: 'dot',
+                    radius: 24,
+                    fontSize: 24
+                },
+                edges: {
+                    width: 2
+                }
+            };
+            graph = new vis.Graph(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()" onresize="graph.redraw();">
+<div id="mygraph"></div>
+</body>
+</html>
diff --git a/examples/graph/09_automatic_sizing.html b/examples/graph/09_automatic_sizing.html
new file mode 100644
index 00000000..c7facdf9
--- /dev/null
+++ b/examples/graph/09_automatic_sizing.html
@@ -0,0 +1,80 @@
+<!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>
+
+    <style type="text/css">
+        html, body {
+            font: 10pt arial;
+        }
+        #mygraph {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../vis.js"></script>
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var graph = null;
+
+        var DIR = 'img/soft-scraps-icons/';
+
+        function draw() {
+            // create people.
+            // value corresponds with the age of the person
+            nodes = [
+                {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
+                {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
+                {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
+                {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
+                {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
+                {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
+                {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
+                {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
+                {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
+                {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
+            ];
+
+            // create connections.
+            // value corresponds with the amount of contact between two people
+            edges = [
+                {from: 2, to: 8, value: 3, title: '3 emails per week'},
+                {from: 2, to: 9, value: 5, title: '5 emails per week'},
+                {from: 2, to: 10,value: 1, title: '1 emails per week'},
+                {from: 4, to: 6, value: 8, title: '8 emails per week'},
+                {from: 5, to: 7, value: 2, title: '2 emails per week'},
+                {from: 4, to: 5, value: 1, title: '1 emails per week'},
+                {from: 9, to: 10,value: 2, title: '2 emails per week'},
+                {from: 2, to: 3, value: 6, title: '6 emails per week'},
+                {from: 3, to: 9, value: 4, title: '4 emails per week'},
+                {from: 5, to: 3, value: 1, title: '1 emails per week'},
+                {from: 2, to: 7, value: 4, title: '4 emails per week'}
+            ];
+
+            // Instantiate our graph object.
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                nodes: {
+                    shape: 'dot'
+                },
+                edges: {
+                    color: '#97C2FC'
+                }
+            };
+            graph = new vis.Graph(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+<div id="mygraph"></div>
+</body>
+</html>
diff --git a/examples/graph/10_multiline_text.html b/examples/graph/10_multiline_text.html
new file mode 100755
index 00000000..1ac13fff
--- /dev/null
+++ b/examples/graph/10_multiline_text.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Graph | Multiline text</title>
+
+    <script type="text/javascript" src="../../vis.js"></script>
+
+    <script type="text/javascript">
+        function draw() {
+            // create some nodes
+            var nodes = [
+                {id: 1, label: 'Node in\nthe center', shape: 'text'},
+                {id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
+                {id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
+                {id: 4, label: 'This is text\non multiple lines', shape: 'box'},
+                {id: 5, label: 'Little text', shape: 'ellipse'}
+            ];
+
+            // create some edges
+            var edges = [
+                {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
+                {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
+                {from: 1, to: 4, style: 'line', width: 1, length: 200},
+                {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
+            ];
+
+            // create a graph
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {};
+            var graph = new vis.Graph(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+<div id="mygraph"></div>
+</body>
+</html>
diff --git a/examples/graph/15_custom_style.html b/examples/graph/11_custom_style.html
similarity index 100%
rename from examples/graph/15_custom_style.html
rename to examples/graph/11_custom_style.html
diff --git a/examples/graph/16_scalable_images.html b/examples/graph/12_scalable_images.html
similarity index 100%
rename from examples/graph/16_scalable_images.html
rename to examples/graph/12_scalable_images.html
diff --git a/examples/graph/18_dashed_lines.html b/examples/graph/13_dashed_lines.html
similarity index 100%
rename from examples/graph/18_dashed_lines.html
rename to examples/graph/13_dashed_lines.html
diff --git a/examples/graph/19_dot_language.html b/examples/graph/14_dot_language.html
similarity index 100%
rename from examples/graph/19_dot_language.html
rename to examples/graph/14_dot_language.html
diff --git a/examples/graph/20_dot_language_playground.html b/examples/graph/15_dot_language_playground.html
similarity index 100%
rename from examples/graph/20_dot_language_playground.html
rename to examples/graph/15_dot_language_playground.html
