@ -0,0 +1,16 @@ | |||
<pre> | |||
_______ _ _ | |||
|__ __| | | (_) | |||
| |_ __ ___ __ _ _ __ | |_ ______ _ ___ | |||
| | '__/ _ \/ _` | '_ \| __|______| / __| | |||
| | | | __/ (_| | | | | |_ | \__ \ | |||
|_|_| \___|\__,_|_| |_|\__| | |___/ | |||
_/ | | |||
|__/ | |||
</pre> | |||
Treant-js is an SVG based JS library for drawing tree diagrams. | |||
It relies on Raphael and jQuery for handling SVG and animations. | |||
For Docs, Examples, and everything else see: | |||
http://fperucic.github.io/treant-js |
@ -0,0 +1,11 @@ | |||
/* required LIB STYLES */ | |||
/* .Treant se automatski dodaje na svaki chart conatiner */ | |||
.Treant { position: relative; overflow: hidden; padding: 0 !important; } | |||
.Treant > .node, | |||
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; } | |||
.Treant.Treant-loaded .node, | |||
.Treant.Treant-loaded .pseudo { visibility: visible; } | |||
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; } | |||
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; } | |||
.Treant .collapsed .collapse-switch { background-color: #868DEE; } | |||
.Treant > .node img { border: none; float: left; } |
@ -0,0 +1 @@ | |||
java -jar {path}/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --warning_level QUIET --externs vendor/jquery.min.js --externs vendor/perfect-scrollbar/perfect-scrollbar.js --externs vendor/raphael.js --language_in ECMASCRIPT5 --js Treant.js --js_output_file Treant.min.js |
@ -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; | |||
} |
@ -0,0 +1,220 @@ | |||
var config = { | |||
container: "#basic-example", | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
ceo = { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg" | |||
}, | |||
cto = { | |||
parent: ceo, | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
stackChildren: true, | |||
image: "../headshots/1.jpg" | |||
}, | |||
cbo = { | |||
parent: ceo, | |||
stackChildren: true, | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
image: "../headshots/5.jpg" | |||
}, | |||
cdo = { | |||
parent: ceo, | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/6.jpg" | |||
}, | |||
cio = { | |||
parent: cto, | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
image: "../headshots/8.jpg" | |||
}, | |||
ciso = { | |||
parent: cto, | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"} | |||
}, | |||
image: "../headshots/9.jpg" | |||
}, | |||
cio2 = { | |||
parent: cdo, | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "http://www.google.com" | |||
}, | |||
image: "../headshots/10.jpg" | |||
}, | |||
ciso2 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
image: "../headshots/7.jpg" | |||
}, | |||
ciso3 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
image: "../headshots/4.jpg" | |||
}, | |||
ciso4 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
image: "../headshots/11.jpg" | |||
} | |||
chart_config = [ | |||
config, | |||
ceo, | |||
cto, | |||
cbo, | |||
cdo, | |||
cio, | |||
ciso, | |||
cio2, | |||
ciso2, | |||
ciso3, | |||
ciso4 | |||
]; | |||
// Antoher approach, same result | |||
// JSON approach | |||
/* | |||
var chart_config = { | |||
chart: { | |||
container: "#basic-example", | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
nodeStructure: { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
stackChildren: true, | |||
image: "../headshots/1.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
image: "../headshots/8.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "we@aregreat.com" | |||
}, | |||
image: "../headshots/9.jpg" | |||
} | |||
] | |||
}, | |||
{ | |||
stackChildren: true, | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
image: "../headshots/5.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
image: "../headshots/7.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
image: "../headshots/4.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
image: "../headshots/11.jpg" | |||
} | |||
] | |||
}, | |||
{ | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/6.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "http://www.google.com" | |||
}, | |||
image: "../headshots/10.jpg" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; | |||
*/ |
@ -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> Basic example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="basic-example.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="basic-example"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="basic-example.js"></script> | |||
<script> | |||
new Treant( chart_config ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,18 @@ | |||
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 { padding: 3px; border: 1px solid #484848; border-radius: 3px; } | |||
.Treant > .node img { width: 100%; height: 100%; } | |||
.Treant .collapse-switch { width: 100%; height: 100%; border: none; } | |||
.Treant .node.collapsed { background-color: #DEF82D; } | |||
.Treant .node.collapsed .collapse-switch { background: none; } |
@ -0,0 +1,112 @@ | |||
var chart_config = { | |||
chart: { | |||
container: "#collapsable-example", | |||
animateOnInit: true, | |||
node: { | |||
collapsable: true | |||
}, | |||
animation: { | |||
nodeAnimation: "easeOutBounce", | |||
nodeSpeed: 700, | |||
connectorsAnimation: "bounce", | |||
connectorsSpeed: 700 | |||
} | |||
}, | |||
nodeStructure: { | |||
image: "img/malory.png", | |||
children: [ | |||
{ | |||
image: "img/lana.png", | |||
collapsed: true, | |||
children: [ | |||
{ | |||
image: "img/figgs.png" | |||
} | |||
] | |||
}, | |||
{ | |||
image: "img/sterling.png", | |||
childrenDropLevel: 1, | |||
children: [ | |||
{ | |||
image: "img/woodhouse.png" | |||
} | |||
] | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
image: "img/cheryl.png" | |||
}, | |||
{ | |||
image: "img/pam.png" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; | |||
/* Array approach | |||
var config = { | |||
container: "#collapsable-example", | |||
animateOnInit: true, | |||
node: { | |||
collapsable: true | |||
}, | |||
animation: { | |||
nodeAnimation: "easeOutBounce", | |||
nodeSpeed: 700, | |||
connectorsAnimation: "bounce", | |||
connectorsSpeed: 700 | |||
} | |||
}, | |||
malory = { | |||
image: "img/malory.png" | |||
}, | |||
lana = { | |||
parent: malory, | |||
image: "img/lana.png" | |||
} | |||
figgs = { | |||
parent: lana, | |||
image: "img/figgs.png" | |||
} | |||
sterling = { | |||
parent: malory, | |||
childrenDropLevel: 1, | |||
image: "img/sterling.png" | |||
}, | |||
woodhouse = { | |||
parent: sterling, | |||
image: "img/woodhouse.png" | |||
}, | |||
pseudo = { | |||
parent: malory, | |||
pseudo: true | |||
}, | |||
cheryl = { | |||
parent: pseudo, | |||
image: "img/cheryl.png" | |||
}, | |||
pam = { | |||
parent: pseudo, | |||
image: "img/pam.png" | |||
}, | |||
chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl]; | |||
*/ |
@ -0,0 +1,28 @@ | |||
<!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> Collapsable example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="collapsable.css"> | |||
<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="collapsable-example"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="../../vendor/jquery.min.js"></script> | |||
<script src="../../vendor/jquery.easing.js"></script> | |||
<script src="collapsable.js"></script> | |||
<script> | |||
tree = new Treant( chart_config ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,39 @@ | |||
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; } | |||
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } | |||
/* optional Container STYLES */ | |||
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.comments { width: 427px; margin: 15px auto; } | |||
.comments ul { margin-left: 35px; list-style: none; } | |||
.comment { | |||
color: #333333; | |||
display: inline-block; | |||
font-size: 14px; | |||
margin-top: 6px; | |||
width: 360px; | |||
} | |||
.comment img { | |||
border-radius: 3px 3px 3px 3px; | |||
float: left; | |||
height: 30px; | |||
margin-right: 8px; | |||
margin-top: 3px; | |||
width: 30px; | |||
} | |||
.comment p { | |||
color: #42474A; | |||
font-size: 14px; | |||
line-height: 1.4em; | |||
margin-bottom: 0; | |||
max-height: 4.2em; | |||
overflow: hidden; | |||
} | |||
.comment .user { | |||
color: rgba(30, 55, 70, 0.4); | |||
font-size: 13px; | |||
font-weight: 600; | |||
} | |||
.Treant .comment { margin: 0; padding: 3px; border: 1px solid #ddd; border-radius: 3px; } |
@ -0,0 +1,79 @@ | |||
var config = { | |||
container: "#OrganiseChart8", | |||
levelSeparation: 70, | |||
siblingSeparation: 60, | |||
nodeAlign: "BOTTOM", | |||
connectors: { | |||
type: "step", | |||
style: { | |||
"stroke-width": 2, | |||
"stroke": "#ccc", | |||
"stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.." | |||
"arrow-end": "classic-wide-long" | |||
} | |||
} | |||
}, | |||
first_post = { | |||
innerHTML: "#first-post" | |||
}, | |||
first_reply = { | |||
parent: first_post, | |||
innerHTML: "#first-reply" | |||
}, | |||
second_reply = { | |||
parent: first_post, | |||
innerHTML: "#second-reply" | |||
} | |||
second_reply_reply = { | |||
parent: second_reply, | |||
innerHTML: "#second-reply-reply" | |||
}, | |||
tree_structure = [ | |||
config, first_post, first_reply, second_reply, second_reply_reply | |||
]; | |||
/* ALTERNATIVE tree_structure CONFIG, same result as above | |||
var tree_structure = { | |||
chart: { | |||
container: "#OrganiseChart8", | |||
levelSeparation: 70, | |||
siblingSeparation: 60, | |||
nodeAlign: "BOTTOM", | |||
connectors: { | |||
type: "step", | |||
style: { | |||
"stroke-width": 2, | |||
"stroke": "#ccc", | |||
"stroke-dasharray": "--", | |||
"arrow-end": "classic-wide-long" | |||
} | |||
} | |||
}, | |||
nodeStructure: { | |||
innerHTML: "#first-post", | |||
children: [ | |||
{ | |||
innerHTML: "#first-reply" | |||
}, | |||
{ | |||
innerHTML: "#second-reply", | |||
children: [ | |||
{ | |||
innerHTML: "#second-reply-reply" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; | |||
*/ | |||
@ -0,0 +1,78 @@ | |||
<!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> Comments, selector example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="example8.css"> | |||
</head> | |||
<body> | |||
<div class="comments"> | |||
<ul> | |||
<li> | |||
<div id="first-post" class="comment"> | |||
<img alt="Avatar" src="avatar.jpg"> | |||
<p> | |||
<span class="user">John Smitt</span> — | |||
<span class="line-truncate"> | |||
<em>Treant.js</em> is an library that handles drawing and visualisation of tree structural charts. What does that mean? | |||
</span> | |||
</p> | |||
</div> | |||
<ul> | |||
<li> | |||
<div id="first-reply" class="comment"> | |||
<img alt="Avatar" src="avatar.jpg"> | |||
<p> | |||
<span class="user"> Peter Griffin </span> — | |||
<span class="line-truncate"> | |||
Great collection! A lot of good inspiration. Thanks! | |||
</span> | |||
</p> | |||
</div> | |||
</li> | |||
<li> | |||
<div id="second-reply" class="comment"> | |||
<img alt="Avatar" src="avatar.jpg"> | |||
<p> | |||
<span class="user">Jane Black</span> — | |||
<span class="line-truncate"> | |||
Thanks for tutorial. One issue I have is that all tutorials is on dev environment. What about production? what differences between … | |||
</span> | |||
</p> | |||
</div> | |||
<ul> | |||
<li> | |||
<div id="second-reply-reply" class="comment"> | |||
<img alt="Avatar" src="avatar.jpg"> | |||
<p> | |||
<span class="user"> Joe Linux </span> — | |||
<span class="line-truncate"> | |||
Looks very promising. I'll have to take a closer look some time. | |||
</span> | |||
</p> | |||
</div> | |||
</li> | |||
</ul> | |||
</li> | |||
</ul> | |||
</li> | |||
</ul> | |||
</div> | |||
<div class="chart" id="OrganiseChart8"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="example8.js"></script> | |||
<script> | |||
new Treant( tree_structure ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,36 @@ | |||
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; } | |||
body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; } | |||
/* optional Container STYLES */ | |||
.chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.node { font-size: 11px; } | |||
.node.big-commpany { | |||
cursor: pointer; | |||
padding: 0 2px; | |||
min-width: 60px; | |||
text-align: center; | |||
height: 30px; | |||
border: 2px solid #E8E8E3; | |||
border-radius: 2px; | |||
box-shadow: 1px 1px 1px rgba(0,0,0,.5); | |||
background: #fff; | |||
} | |||
.node.big-commpany:active { | |||
box-shadow: inset 1px 1px 1px rgba(0,0,0,.1); | |||
margin: 1px 0 0 1px; | |||
border: 2px solid #D3D3CB; | |||
} | |||
.node.big-commpany .node-name { | |||
line-height: 30px; | |||
color: #9B9B9B; | |||
} | |||
.node.big-commpany:hover .node-name { | |||
color: #8B8B8B; | |||
text-shadow: 1px 1px rgba(0,0,0,.15); | |||
} |
@ -0,0 +1,166 @@ | |||
// fix arrow end issues: | |||
// https://github.com/DmitryBaranovskiy/raphael/issues/471 | |||
var chart_config = { | |||
chart: { | |||
container: "#OrganiseChart-big-commpany", | |||
levelSeparation: 45, | |||
rootOrientation: "WEST", | |||
nodeAlign: "BOTTOM", | |||
connectors: { | |||
type: "step", | |||
style: { | |||
"stroke-width": 2 | |||
} | |||
}, | |||
node: { | |||
HTMLclass: "big-commpany" | |||
} | |||
}, | |||
nodeStructure: { | |||
text: { name: "CEO" }, | |||
connectors: { | |||
style: { | |||
'stroke': '#bbb', | |||
'arrow-end': 'oval-wide-long' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: { name: "Account" }, | |||
stackChildren: true, | |||
connectors: { | |||
style: { | |||
'stroke': '#8080FF', | |||
'arrow-end': 'block-wide-long' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Receptionist"}, | |||
HTMLclass: "reception" | |||
}, | |||
{ | |||
text: {name: "Author"} | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "Operation Manager" }, | |||
connectors: { | |||
style: { | |||
'stroke': '#bbb', | |||
"stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.." | |||
'arrow-start': 'classic-wide-long' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Manager I"}, | |||
connectors: { | |||
style: { | |||
stroke: "#00CE67" | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Worker I"} | |||
}, | |||
{ | |||
pseudo: true, | |||
connectors: { | |||
style: { | |||
stroke: "#00CE67" | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Worker II"} | |||
} | |||
] | |||
}, | |||
{ | |||
text: {name: "Worker III"} | |||
} | |||
] | |||
}, | |||
{ | |||
text: {name: "Manager II"}, | |||
connectors: { | |||
type: "curve", | |||
style: { | |||
stroke: "#50688D" | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Worker I"} | |||
}, | |||
{ | |||
text: {name: "Worker II"} | |||
} | |||
] | |||
}, | |||
{ | |||
text: {name: "Manager III"}, | |||
connectors: { | |||
style: { | |||
'stroke': '#FF5555' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Worker I"} | |||
}, | |||
{ | |||
pseudo: true, | |||
connectors: { | |||
style: { | |||
'stroke': '#FF5555' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Worker II"} | |||
}, | |||
{ | |||
text: {name: "Worker III"} | |||
} | |||
] | |||
}, | |||
{ | |||
text: {name: "Worker IV"} | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "Delivery Manager" }, | |||
stackChildren: true, | |||
connectors: { | |||
stackIndent: 30, | |||
style: { | |||
'stroke': '#E3C61A', | |||
'arrow-end': 'block-wide-long' | |||
} | |||
}, | |||
children: [ | |||
{ | |||
text: {name: "Driver I"} | |||
}, | |||
{ | |||
text: {name: "Driver II"} | |||
}, | |||
{ | |||
text: {name: "Driver III"} | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; |
@ -0,0 +1,28 @@ | |||
<!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> Connectors style example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="connectors.css"> | |||
<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart-big-commpany"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="connectors.js"></script> | |||
<script> | |||
new Treant( chart_config ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,44 @@ | |||
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: 670px; margin: 5px; width: 900px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.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: #262626; | |||
border: 1px solid #000; | |||
width: 200px; | |||
font-family: Tahoma; | |||
font-size: 12px; | |||
color: #ffffff; | |||
} | |||
.nodeExample1 img { | |||
margin-right: 10px; | |||
} | |||
.Treant > a:link { | |||
color: #ffffff; | |||
} | |||
.Treant > a:visited { | |||
color: #ffffff; | |||
} | |||
.Treant > a:link:hover { | |||
color: #636363; | |||
} |
@ -0,0 +1,127 @@ | |||
var config = { | |||
container: "#OrganiseChart1", | |||
rootOrientation: 'WEST', // NORTH || EAST || WEST || SOUTH | |||
// levelSeparation: 30, | |||
siblingSeparation: 20, | |||
subTeeSeparation: 60, | |||
scrollbar: "fancy", | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
ceo = { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg", | |||
HTMLid: "ceo" | |||
}, | |||
cto = { | |||
parent: ceo, | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
stackChildren: true, | |||
image: "../headshots/1.jpg", | |||
HTMLid: "coo" | |||
}, | |||
cbo = { | |||
parent: ceo, | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
image: "../headshots/5.jpg", | |||
HTMLid: "cbo" | |||
}, | |||
cdo = { | |||
parent: ceo, | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/6.jpg", | |||
HTMLid: "cdo" | |||
}, | |||
cio = { | |||
parent: cto, | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
image: "../headshots/8.jpg", | |||
HTMLid: "cio" | |||
}, | |||
ciso = { | |||
parent: cto, | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "we@aregreat.com" | |||
}, | |||
image: "../headshots/9.jpg", | |||
HTMLid: "ciso" | |||
}, | |||
cio2 = { | |||
parent: cdo, | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "http://www.google.com", | |||
target: "_blank" | |||
}, | |||
image: "../headshots/10.jpg", | |||
HTMLid: "cio2" | |||
}, | |||
ciso2 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
image: "../headshots/7.jpg", | |||
HTMLid: "ciso2" | |||
}, | |||
ciso3 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
image: "../headshots/4.jpg", | |||
HTMLid: "ciso2" | |||
}, | |||
ciso4 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
image: "../headshots/11.jpg", | |||
HTMLid: "ciso2" | |||
} | |||
ALTERNATIVE = [ | |||
config, | |||
ceo, | |||
cto, | |||
cbo, | |||
cdo, | |||
cio, | |||
ciso, | |||
cio2, | |||
ciso2, | |||
ciso3, | |||
ciso4 | |||
]; |
@ -0,0 +1,28 @@ | |||
<!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> Chart example 1 </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="custom-color-plus-scrollbar.css"> | |||
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart1"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="../../vendor/jquery.min.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script> | |||
<script src="custom-color-plus-scrollbar.js"></script> | |||
<script> | |||
new Treant( ALTERNATIVE ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,43 @@ | |||
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: 550px; 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; | |||
} | |||
.gray { | |||
background-color: #909090; | |||
} | |||
.light-gray { | |||
background-color: #D3D3C7; | |||
} | |||
.blue { | |||
background-color: #A2BDFD; | |||
} |
@ -0,0 +1,231 @@ | |||
var config = { | |||
container: "#custom-colored", | |||
nodeAlign: "BOTTOM", | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
ceo = { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg" | |||
}, | |||
cto = { | |||
parent: ceo, | |||
HTMLclass: 'light-gray', | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
image: "../headshots/1.jpg" | |||
}, | |||
cbo = { | |||
parent: ceo, | |||
childrenDropLevel: 2, | |||
HTMLclass: 'blue', | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
image: "../headshots/5.jpg" | |||
}, | |||
cdo = { | |||
parent: ceo, | |||
HTMLclass: 'gray', | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/6.jpg" | |||
}, | |||
cio = { | |||
parent: cto, | |||
HTMLclass: 'light-gray', | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
image: "../headshots/8.jpg" | |||
}, | |||
ciso = { | |||
parent: cto, | |||
HTMLclass: 'light-gray', | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "we@aregreat.com" | |||
}, | |||
image: "../headshots/9.jpg" | |||
}, | |||
cio2 = { | |||
parent: cdo, | |||
HTMLclass: 'gray', | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "http://www.google.com" | |||
}, | |||
image: "../headshots/10.jpg" | |||
}, | |||
ciso2 = { | |||
parent: cbo, | |||
HTMLclass: 'blue', | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
image: "../headshots/7.jpg" | |||
}, | |||
ciso3 = { | |||
parent: cbo, | |||
HTMLclass: 'blue', | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
image: "../headshots/4.jpg" | |||
}, | |||
ciso4 = { | |||
parent: cbo, | |||
HTMLclass: 'blue', | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
image: "../headshots/11.jpg" | |||
}, | |||
chart_config = [ | |||
config, | |||
ceo,cto,cbo, | |||
cdo,cio,ciso, | |||
cio2,ciso2,ciso3,ciso4 | |||
]; | |||
// Antoher approach, same result | |||
// JSON approach | |||
/* | |||
var chart_config = { | |||
chart: { | |||
container: "#custom-colored", | |||
nodeAlign: "BOTTOM", | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
nodeStructure: { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
image: "../headshots/1.jpg", | |||
HTMLclass: 'light-gray', | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
HTMLclass: 'light-gray', | |||
image: "../headshots/8.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "we@aregreat.com" | |||
}, | |||
HTMLclass: 'light-gray', | |||
image: "../headshots/9.jpg" | |||
} | |||
] | |||
}, | |||
{ | |||
childrenDropLevel: 2, | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
HTMLclass: 'blue', | |||
image: "../headshots/5.jpg", | |||
children: [ | |||
{ | |||
parent: cbo, | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
HTMLclass: 'blue', | |||
image: "../headshots/7.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
HTMLclass: 'blue', | |||
image: "../headshots/4.jpg" | |||
}, | |||
{ | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
HTMLclass: 'blue', | |||
image: "../headshots/11.jpg" | |||
} | |||
] | |||
}, | |||
{ | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
HTMLclass: 'gray', | |||
image: "../headshots/6.jpg", | |||
children: [ | |||
{ | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "http://www.google.com" | |||
}, | |||
HTMLclass: 'gray', | |||
image: "../headshots/10.jpg" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; | |||
*/ |
@ -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> Custom colored example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="custom-colored.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="custom-colored"> --@-- </div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="custom-colored.js"></script> | |||
<script> | |||
new Treant( chart_config ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,25 @@ | |||
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; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } | |||
/* optional Container STYLES */ | |||
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.evolution-tree { | |||
padding: 2px; | |||
width: 40px; height: 40px; | |||
border-radius: 3px; | |||
font-size: 10px; | |||
} | |||
.evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; } | |||
.evolution-tree img { margin-right: 10px; float: none !important; } | |||
.evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; } | |||
.evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; } |
@ -0,0 +1,263 @@ | |||
var tree_structure = { | |||
chart: { | |||
container: "#OrganiseChart6", | |||
levelSeparation: 25, | |||
siblingSeparation: 70, | |||
subTeeSeparation: 70, | |||
nodeAlign: "BOTTOM", | |||
scrollbar: "fancy", | |||
padding: 35, | |||
node: { HTMLclass: "evolution-tree" }, | |||
connectors: { | |||
type: "curve", | |||
style: { | |||
"stroke-width": 2, | |||
"stroke-linecap": "round", | |||
"stroke": "#ccc" | |||
} | |||
} | |||
}, | |||
nodeStructure: { | |||
text: { name: "LIFE" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "true bacteria" }, | |||
image: "img/truebacteria.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "archea bacteria" }, | |||
image: "img/archaebacteria.png" | |||
}, | |||
{ | |||
text: { name: "EUKARYOTES" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "protocists" }, | |||
image: "img/protoctis.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "PLANTS" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "flowering seed plants" }, | |||
image: "img/cvijece2.png" | |||
}, | |||
{ | |||
text: { name: "non-flowering seed plants" }, | |||
image: "img/ne_cvijece.png" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "ferns and fern allies" }, | |||
image: "img/ferns.png" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "mosses and allies" }, | |||
image: "img/mosses.png" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "green algae" }, | |||
image: "img/greenalgae.png" | |||
} | |||
] | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "fungi and lichens" }, | |||
image: "img/fungi.png" | |||
}, | |||
{ | |||
text: { name: "ANIMALS" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "sponges" }, | |||
image: "img/spuzva.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "cnidarians" }, | |||
image: "img/cnidarians.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
childrenDropLevel: 1, | |||
children: [ | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "echinoderms" }, | |||
image: "img/zvezda.png" | |||
}, | |||
{ | |||
text: { name: "VERTEBRATES" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "cartilaginous fish" }, | |||
image: "img/cartilaginousfish.png" | |||
}, | |||
{ | |||
text: { name: "bony fish" }, | |||
image: "img/bonyfish.png" | |||
}, | |||
{ | |||
text: { name: "TETRAPODS" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "amphibians" }, | |||
image: "img/zaba.png" | |||
}, | |||
{ | |||
text: { name: "AMNIOTES" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "turtles" }, | |||
image: "img/kornjaca.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "snakes and lizards" }, | |||
image: "img/zmijurina.png" | |||
}, | |||
{ | |||
text: { name: "crocodiles and birds" }, | |||
image: "img/ptica.png" | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "mammals" }, | |||
image: "img/slon.png" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { name: "ARTHROPODS" }, | |||
HTMLclass: "the-parent", | |||
children: [ | |||
{ | |||
text: { name: "chelicerates" }, | |||
image: "img/chelirates.png" | |||
}, | |||
{ | |||
pseudo: true, | |||
stackChildren: true, | |||
children: [ | |||
{ | |||
text: { name: "crustaceans" }, | |||
image: "img/rak.png" | |||
}, | |||
{ | |||
text: { name: "insects and myriapods" }, | |||
image: "img/insekti.png" | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
pseudo: true, | |||
children: [ | |||
{ | |||
text: { name: "flatworms" }, | |||
image: "img/flatare.png" | |||
}, | |||
{ | |||
text: { name: "lophophorates" }, | |||
image: "img/lophoprates.png" | |||
} | |||
] | |||
}, | |||
{ | |||
pseudo: true, | |||
childrenDropLevel: 1, | |||
stackChildren: true, | |||
children: [ | |||
{ | |||
text: { name: "rotifers" }, | |||
image: "img/rotfiers.png" | |||
}, | |||
{ | |||
text: { name: "roundworms" }, | |||
image: "img/roundworms.png" | |||
} | |||
] | |||
}, | |||
{ | |||
pseudo: true, | |||
childrenDropLevel: 1, | |||
stackChildren: true, | |||
children: [ | |||
{ | |||
text: { name: "mollusks" }, | |||
image: "img/mosculs.png" | |||
}, | |||
{ | |||
text: { name: "segmented worms" }, | |||
image: "img/segmentedworms.png" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; |
@ -0,0 +1,29 @@ | |||
<!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> Evolution tree example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="example6.css"> | |||
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart6"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="../../vendor/jquery.min.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script> | |||
<script src="example6.js"></script> | |||
<script> | |||
new Treant( tree_structure ); | |||
</script> | |||
</body> | |||
</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> Chart example 1 </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="no-parent.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart1"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="no-parent.js"></script> | |||
<script> | |||
new Treant(ALTERNATIVE); | |||
</script> | |||
</body> | |||
</html> |
@ -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: 670px; 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; font-size: 16px;} | |||
.nodeExample1 { | |||
padding: 10px; | |||
-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; | |||
} |
@ -0,0 +1,117 @@ | |||
var config = { | |||
container: "#OrganiseChart1", | |||
rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH | |||
hideRootNode: true, | |||
// levelSeparation: 30, | |||
siblingSeparation: 40, | |||
subTeeSeparation: 30, | |||
connectors: { | |||
type: 'curve' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
root = {}, | |||
cto = { | |||
parent: root, | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Board member", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
stackChildren: true, | |||
HTMLid: "coo" | |||
}, | |||
cbo = { | |||
parent: root, | |||
stackChildren: true, | |||
text:{ | |||
name: "Linda May", | |||
title: "Board member", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "cbo" | |||
}, | |||
cdo = { | |||
parent: root, | |||
text:{ | |||
name: "John Green", | |||
title: "Board member, CEO", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "cdo" | |||
}, | |||
cio = { | |||
parent: cto, | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "cio" | |||
}, | |||
ciso = { | |||
parent: cto, | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "ciso" | |||
}, | |||
cio2 = { | |||
parent: cdo, | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
link: { | |||
href: "www.google.com" | |||
}, | |||
HTMLid: "cio2" | |||
}, | |||
ciso2 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "ciso2" | |||
}, | |||
ciso3 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "ciso2" | |||
}, | |||
ciso4 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer", | |||
contact: "email: we@aregreat.com" | |||
}, | |||
HTMLid: "ciso2" | |||
} | |||
ALTERNATIVE = [ | |||
config, | |||
root, | |||
cto, | |||
cbo, | |||
cdo, | |||
cio, | |||
ciso, | |||
cio2, | |||
ciso2, | |||
ciso3, | |||
ciso4 | |||
]; |
@ -0,0 +1,28 @@ | |||
<!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> Chart example 1 </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="simple-scrollbar.css"> | |||
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart1"> --@-- </div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="../../vendor/jquery.min.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script> | |||
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script> | |||
<script src="simple-scrollbar.js"></script> | |||
<script> | |||
new Treant( ALTERNATIVE ); | |||
</script> | |||
</body> | |||
</html> |
@ -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: 400px; margin: 5px; width: 500px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.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; | |||
} |
@ -0,0 +1,127 @@ | |||
var config = { | |||
container: "#OrganiseChart1", | |||
rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH | |||
scrollbar: "fancy", | |||
// levelSeparation: 30, | |||
siblingSeparation: 20, | |||
subTeeSeparation: 60, | |||
connectors: { | |||
type: 'step' | |||
}, | |||
node: { | |||
HTMLclass: 'nodeExample1' | |||
} | |||
}, | |||
ceo = { | |||
text: { | |||
name: "Mark Hill", | |||
title: "Chief executive officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/2.jpg", | |||
HTMLid: "ceo" | |||
}, | |||
cto = { | |||
parent: ceo, | |||
text:{ | |||
name: "Joe Linux", | |||
title: "Chief Technology Officer", | |||
}, | |||
stackChildren: true, | |||
image: "../headshots/1.jpg", | |||
HTMLid: "coo" | |||
}, | |||
cbo = { | |||
parent: ceo, | |||
stackChildren: true, | |||
text:{ | |||
name: "Linda May", | |||
title: "Chief Business Officer", | |||
}, | |||
image: "../headshots/5.jpg", | |||
HTMLid: "cbo" | |||
}, | |||
cdo = { | |||
parent: ceo, | |||
text:{ | |||
name: "John Green", | |||
title: "Chief accounting officer", | |||
contact: "Tel: 01 213 123 134", | |||
}, | |||
image: "../headshots/6.jpg", | |||
HTMLid: "cdo" | |||
}, | |||
cio = { | |||
parent: cto, | |||
text:{ | |||
name: "Ron Blomquist", | |||
title: "Chief Information Security Officer" | |||
}, | |||
image: "../headshots/8.jpg", | |||
HTMLid: "cio" | |||
}, | |||
ciso = { | |||
parent: cto, | |||
text:{ | |||
name: "Michael Rubin", | |||
title: "Chief Innovation Officer", | |||
contact: "we@aregreat.com" | |||
}, | |||
image: "../headshots/9.jpg", | |||
HTMLid: "ciso" | |||
}, | |||
cio2 = { | |||
parent: cdo, | |||
text:{ | |||
name: "Erica Reel", | |||
title: "Chief Customer Officer" | |||
}, | |||
link: { | |||
href: "www.google.com" | |||
}, | |||
image: "../headshots/10.jpg", | |||
HTMLid: "cio2" | |||
}, | |||
ciso2 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Alice Lopez", | |||
title: "Chief Communications Officer" | |||
}, | |||
image: "../headshots/7.jpg", | |||
HTMLid: "ciso2" | |||
}, | |||
ciso3 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Mary Johnson", | |||
title: "Chief Brand Officer" | |||
}, | |||
image: "../headshots/4.jpg", | |||
HTMLid: "ciso2" | |||
}, | |||
ciso4 = { | |||
parent: cbo, | |||
text:{ | |||
name: "Kirk Douglas", | |||
title: "Chief Business Development Officer" | |||
}, | |||
image: "../headshots/11.jpg", | |||
HTMLid: "ciso2" | |||
} | |||
ALTERNATIVE = [ | |||
config, | |||
ceo, | |||
cto, | |||
cbo, | |||
cdo, | |||
cio, | |||
ciso, | |||
cio2, | |||
ciso2, | |||
ciso3, | |||
ciso4 | |||
]; |
@ -0,0 +1,24 @@ | |||
<!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> Chart emulation </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="super-simple.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart-simple"> | |||
</div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="super-simple.js"></script> | |||
<script> | |||
new Treant( simple_chart_config ); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,9 @@ | |||
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; } | |||
body { background: #fff; } | |||
/* optional Container STYLES */ | |||
.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; } | |||
.node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; } |
@ -0,0 +1,43 @@ | |||
var simple_chart_config = { | |||
chart: { | |||
container: "#OrganiseChart-simple" | |||
}, | |||
nodeStructure: { | |||
text: { name: "Parent node" }, | |||
children: [ | |||
{ | |||
text: { name: "First child" } | |||
}, | |||
{ | |||
text: { name: "Second child" } | |||
} | |||
] | |||
} | |||
}; | |||
// // // // // // // // // // // // // // // // // // // // // // // // | |||
var config = { | |||
container: "#OrganiseChart-simple" | |||
}; | |||
var parent_node = { | |||
text: { name: "Parent node" } | |||
}; | |||
var first_child = { | |||
parent: parent_node, | |||
text: { name: "First child" } | |||
}; | |||
var second_child = { | |||
parent: parent_node, | |||
text: { name: "Second child" } | |||
}; | |||
var simple_chart_config = [ | |||
config, parent_node, | |||
first_child, second_child | |||
]; |
@ -0,0 +1,36 @@ | |||
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; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } | |||
/* optional Container STYLES */ | |||
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; } | |||
.tennis-draw { | |||
font-size: 10px; | |||
width: 100px; | |||
} | |||
.tennis-draw.winner { height: 38px; } | |||
.tennis-draw.winner:hover { background: url('trophy.png') right 0 no-repeat; } | |||
.tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; } | |||
.tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; } | |||
.tennis-draw .node-desc { padding: 2px; color: #999; } | |||
.tennis-draw.first-draw .node-title, | |||
.tennis-draw.first-draw .node-name, | |||
.tennis-draw.first-draw img { position: absolute; top: -8px; } | |||
.tennis-draw.first-draw:hover img { width: 20px; top: -12px; } | |||
.tennis-draw.first-draw { width: 165px; height: 20px; } | |||
.tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; } | |||
.tennis-draw.first-draw .node-title { margin-top: 3px; } | |||
.tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; } | |||
.tennis-draw.first-draw.bye .node-name { color: #999; } | |||
@ -0,0 +1,272 @@ | |||
// source: | |||
// http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013 | |||
var tree_structure = { | |||
chart: { | |||
container: "#OrganiseChart6", | |||
levelSeparation: 20, | |||
siblingSeparation: 15, | |||
subTeeSeparation: 15, | |||
rootOrientation: "EAST", | |||
node: { | |||
HTMLclass: "tennis-draw", | |||
drawLineThrough: true | |||
}, | |||
connectors: { | |||
type: "straight", | |||
style: { | |||
"stroke-width": 2, | |||
"stroke": "#ccc" | |||
} | |||
} | |||
}, | |||
nodeStructure: { | |||
text: { | |||
name: {val: "Djokovic, Novak", href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"} | |||
}, | |||
HTMLclass: "winner", | |||
children: [ | |||
{ | |||
text: { | |||
name: "Djokovic, Novak", | |||
desc: "4-6, 6-2, 6-2" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Djokovic, Novak", | |||
desc: "4-6, 6-1, 6-4" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Djokovic, Novak", | |||
desc: "4-6, 6-1, 6-4" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Djokovic, Novak", | |||
title: 1 | |||
}, | |||
image: "flags/srb.jpg", | |||
HTMLclass: "first-draw", | |||
}, | |||
{ | |||
text: { | |||
name: "Bye", | |||
title: 2 | |||
}, | |||
HTMLclass: "first-draw bye" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Youzhny, Mikhail", | |||
desc: "6-4, 6-0" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Youzhny, Mikhail", | |||
title: 3 | |||
}, | |||
image: "flags/rus.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Gimeno-Traver, Daniel", | |||
title: 4 | |||
}, | |||
image: "flags/esp.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Monaco, Juan", | |||
desc: "6-0, 3-6, 6-3" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Gulbis, Ernests", | |||
desc: "4-6, 6-2, 6-3" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Gulbis, Ernests", | |||
title: 5 | |||
}, | |||
image: "flags/lat.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Isner, John", | |||
title: 6 | |||
}, | |||
image: "flags/usa.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Monaco, Juan", | |||
desc: "6-4, 6-0" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Klizan, Martin", | |||
title: 7 | |||
}, | |||
image: "flags/slo.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Monaco, Juan", | |||
title: 8 | |||
}, | |||
image: "flags/arg.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Nieminen, Jarkko", | |||
desc: "6-3, 1-6, 7-6(3)" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Nieminen, Jarkko", | |||
desc: "4-6, 6-1, 6-4" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Raonic, Milos", | |||
desc: "6-1, 6-4" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Raonic, Milos", | |||
title: 9 | |||
}, | |||
image: "flags/can.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Benneteau, Julien", | |||
title: 10 | |||
}, | |||
image: "flags/fra.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Nieminen, Jarkko", | |||
desc: "6-1, 6-2" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Nieminen, Jarkko", | |||
title: 11 | |||
}, | |||
image: "flags/fin.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Troicki, Viktor", | |||
title: 12 | |||
}, | |||
image: "flags/srb.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Del Potro, Juan Martin", | |||
desc: "6-2, 6-4" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Dolgopolov, Alexandr", | |||
desc: "4-6, 6-2, 6-3" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Dolgopolov, Alexandr", | |||
title: 13 | |||
}, | |||
image: "flags/ukr.jpg", | |||
HTMLclass: "first-draw" | |||
}, | |||
{ | |||
text: { | |||
name: "Tomic, Bernard", | |||
title: 14 | |||
}, | |||
image: "flags/aus.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
}, | |||
{ | |||
text: { | |||
name: "Del Potro, Juan Martin", | |||
desc: "6-4, 6-0" | |||
}, | |||
children: [ | |||
{ | |||
text: { | |||
name: "Bye", | |||
title: 15 | |||
}, | |||
HTMLclass: "first-draw bye" | |||
}, | |||
{ | |||
text: { | |||
name: "Del Potro, Juan Martin", | |||
title: 16 | |||
}, | |||
image: "flags/arg.jpg", | |||
HTMLclass: "first-draw" | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
] | |||
} | |||
}; |
@ -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> Tennis draw example </title> | |||
<link rel="stylesheet" href="../../Treant.css"> | |||
<link rel="stylesheet" href="example7.css"> | |||
</head> | |||
<body> | |||
<div class="chart" id="OrganiseChart6"></div> | |||
<script src="../../vendor/raphael.js"></script> | |||
<script src="../../Treant.js"></script> | |||
<script src="example7.js"></script> | |||
<script> | |||
new Treant( tree_structure ); | |||
</script> | |||
</body> | |||
</html> |