Add a sample code for json data dynamically

examples/data-dynamically/data-dynamically-example-http.js

@@ -0,0 +1,60 @@
+
+function loadJSON(callback) {
+    var xobj = new XMLHttpRequest();
+    xobj.overrideMimeType("application/json");
+    xobj.open('GET', 'json-data-sample.json', true);
+    xobj.onreadystatechange = function () {
+        if (xobj.readyState == 4 && xobj.status == "200") {
+            callback(xobj.responseText);
+        }
+    };
+    xobj.send(null);
+}
+
+var config = {
+    container: "#data-dynamically-example",
+
+    connectors: {
+        type: 'step'
+    },
+    node: {
+        HTMLclass: 'nodeExample1'
+    }
+}
+
+loadJSON(function (response) {
+    // Parse JSON string into object
+    var json_data = JSON.parse(response);
+    var jModel = eval(json_data);
+    //console.log(jModel);
+    var offset = 1;
+    var chart_config = new Array(jModel.length + offset);
+    chart_config[0] = config;
+    for (k = 0; k < jModel.length; k++) {
+        var varname = jModel[k]["id"];
+        eval('var ' + varname + '= new Object()');
+        eval(varname + '.text = new Object();');
+        eval(varname + '.id = jModel[k]["id"];');
+        eval(varname + '.text.name = jModel[k]["name"];');
+        eval(varname + '.text.title = jModel[k]["title"];');
+        if (jModel[k]["parent"] != null) {
+            eval(varname + '.parent = jModel[k]["parent"];');
+        }
+        eval(varname + '.image = jModel[k]["image"];');
+        if (k > 0) {
+            eval(varname + '.stackChildren = true;');
+        }
+        eval('chart_config[k+offset] = ' + varname + ';');
+    }
+    for (j = 1; j < chart_config.length; j++) {
+        if (chart_config[j]["parent"] != "null") {
+            for (i = 1; i < chart_config.length; i++) {
+                if (chart_config[j]["parent"] == chart_config[i]["id"]) {
+                    chart_config[j]["parent"] = chart_config[i];
+                }
+            }
+        }
+    }
+    Treant(chart_config);
+
+});

examples/data-dynamically/data-dynamically-example.css

@@ -0,0 +1,31 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 600px; margin: 5px; width: 900px; }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold;}
+
+.nodeExample1 {
+    padding: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}

examples/data-dynamically/data-dynamically-example.js

@@ -0,0 +1,107 @@
+ var json_data = [
+    {
+        "id": "ceo",
+        "name": "Mark Hill",
+        "title": "Chief executive officer",
+        "contact": "Tel: 01 213 123 134",
+        "image": "../headshots/2.jpg"
+    },
+    {
+        "id": "cto",
+        "parent": "ceo",
+        "name": "Joe Linux",
+        "title": "Chief Technology Officer",
+        "image": "../headshots/1.jpg"
+    },
+    {
+        "id": "cbo",
+        "parent": "ceo",
+        "name": "Linda May",
+        "title": "Chief Business Officer",
+        "image": "../headshots/5.jpg"
+    },
+    {
+        "id": "cdo",
+        "parent": "ceo",
+        "name": "John Green",
+        "title": "Chief accounting officer",
+        "image": "../headshots/6.jpg"
+    },
+    {
+        "id": "ciso",
+        "parent": "cto",
+        "name": "Michael Rubin",
+        "title": "Chief Innovation Officer",
+        "image": "../headshots/9.jpg"
+    },
+    {
+        "id": "ciso2",
+        "parent": "cbo",
+        "name": "Alice Lopez",
+        "title": "Chief Communications Officer",
+        "image": "../headshots/7.jpg"
+    },
+    {
+        "id": "cio2",
+        "parent": "cdo",
+        "name": "Erica Reel",
+        "title": "Chief Customer Officer",
+        "image": "../headshots/10.jpg"
+    },
+    {
+        "id": "ciso3",
+        "parent": "cbo",
+        "name": "Mary Johnson",
+        "title": "Chief Brand Officer",
+        "image": "../headshots/4.jpg"
+    },
+    {
+        "id": "ciso4",
+        "parent": "cbo",
+        "name": "Kirk Douglas",
+        "title": "Chief Business Development Officer",
+        "image": "../headshots/11.jpg"
+    }
+];
+var config = {
+    container: "#data-dynamically-example",
+
+    connectors: {
+        type: 'step'
+    },
+    node: {
+        HTMLclass: 'nodeExample1'
+    }
+}
+
+var jModel = eval(json_data);
+//console.log(jModel);
+var offset = 1;
+var chart_config = new Array(jModel.length + offset);
+chart_config[0] = config;
+for (k = 0; k < jModel.length; k++) {
+    var varname = jModel[k]["id"];
+    eval('var ' + varname + '= new Object()');
+    eval(varname + '.text = new Object();');
+    eval(varname + '.id = jModel[k]["id"];');
+    eval(varname + '.text.name = jModel[k]["name"];');
+    eval(varname + '.text.title = jModel[k]["title"];');
+    if (jModel[k]["parent"] != null) {
+       eval(varname + '.parent = jModel[k]["parent"];');
+    }
+    eval(varname + '.image = jModel[k]["image"];');
+    if (k>0){
+       eval(varname + '.stackChildren = true;');
+    }
+    eval('chart_config[k+offset] = ' + varname + ';');
+ }
+ for (j = 1; j < chart_config.length; j++) {
+    if (chart_config[j]["parent"] != "null") {
+        for (i = 1; i < chart_config.length; i++) {
+            if (chart_config[j]["parent"] == chart_config[i]["id"]) {
+               chart_config[j]["parent"] = chart_config[i];
+            }
+        }
+    }
+ }
+ Treant(chart_config);

examples/data-dynamically/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Data dynamically example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="data-dynamically-example.css">
+
+</head>
+
+<body>
+    <div class="chart" id="data-dynamically-example"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+
+    <script src="data-dynamically-example.js"></script>
+</body>
+
+</html>

examples/data-dynamically/index_http.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> HTTP Data dynamically example</title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="data-dynamically-example.css">
+
+</head>
+
+<body>
+    <div class="chart" id="data-dynamically-example"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+
+    <script src="data-dynamically-example-http.js"></script>
+</body>
+
+</html>

examples/data-dynamically/json-data-sample.json

@@ -0,0 +1,65 @@
+[
+    {
+        "id": "ceo",
+        "name": "Mark Hill",
+        "title": "Chief executive officer",
+        "contact": "Tel: 01 213 123 134",
+        "image": "../headshots/2.jpg"
+    },
+    {
+        "id": "cto",
+        "parent": "ceo",
+        "name": "Joe Linux",
+        "title": "Chief Technology Officer",
+        "image": "../headshots/1.jpg"
+    },
+    {
+        "id": "cbo",
+        "parent": "ceo",
+        "name": "Linda May",
+        "title": "Chief Business Officer",
+        "image": "../headshots/5.jpg"
+    },
+    {
+        "id": "cdo",
+        "parent": "ceo",
+        "name": "John Green",
+        "title": "Chief accounting officer",
+        "image": "../headshots/6.jpg"
+    },
+    {
+        "id": "ciso",
+        "parent": "cto",
+        "name": "Michael Rubin",
+        "title": "Chief Innovation Officer",
+        "image": "../headshots/9.jpg"
+    },
+    {
+        "id": "ciso2",
+        "parent": "cbo",
+        "name": "Alice Lopez",
+        "title": "Chief Communications Officer",
+        "image": "../headshots/7.jpg"
+    },
+    {
+        "id": "cio2",
+        "parent": "cdo",
+        "name": "Erica Reel",
+        "title": "Chief Customer Officer",
+        "image": "../headshots/10.jpg"
+    },
+    {
+        "id": "ciso3",
+        "parent": "cbo",
+        "name": "Mary Johnson",
+        "title": "Chief Brand Officer",
+        "image": "../headshots/4.jpg"
+    },
+    {
+        "id": "ciso4",
+        "parent": "cbo",
+        "name": "Kirk Douglas",
+        "title": "Chief Business Development Officer",
+        "image": "../headshots/11.jpg"
+    }
+]