paco
@@ -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];
|
||||
|
||||
*/
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 870 B |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 851 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 637 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 881 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 674 B |
|
After Width: | Height: | Size: 938 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 928 B |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 893 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 647 B |
|
After Width: | Height: | Size: 775 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 846 B |
|
After Width: | Height: | Size: 1.1 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
After Width: | Height: | Size: 490 B |
|
After Width: | Height: | Size: 519 B |
|
After Width: | Height: | Size: 483 B |
|
After Width: | Height: | Size: 469 B |
|
After Width: | Height: | Size: 478 B |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 461 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 445 B |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 489 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 637 B |
@@ -0,0 +1,420 @@
|
||||
|
||||
// img_examples/example4
|
||||
var example1 = {
|
||||
chart: {
|
||||
container: "#OrganiseChart1",
|
||||
levelSeparation: 25,
|
||||
siblingSeparation: 15,
|
||||
subTeeSeparation: 15
|
||||
},
|
||||
|
||||
nodeStructure: {
|
||||
text: {
|
||||
name: "C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
{
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul><img src='slika-manja.jpg' />"
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'step',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'arrow-start': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var example1b = {
|
||||
chart: {
|
||||
container: "#OrganiseChart1"
|
||||
// nodeAlign: "BOTTOM"
|
||||
},
|
||||
|
||||
nodeStructure: {
|
||||
text: {
|
||||
name: "C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'step',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'arrow-start': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
children: [
|
||||
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
{
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul><img src='slika-manja.jpg' />"
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// #####################################
|
||||
// ########### ALTERNATIVE CONFIG ######
|
||||
// #####################################
|
||||
|
||||
var config = {
|
||||
container: "#OrganiseChart5"
|
||||
//rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
|
||||
// levelSeparation: 30,
|
||||
// siblingSeparation: 30,
|
||||
// subTeeSeparation: 30,
|
||||
},
|
||||
rootNode = {
|
||||
text: {
|
||||
name: "C1"
|
||||
}
|
||||
},
|
||||
|
||||
node11 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true
|
||||
},
|
||||
node12 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C2"
|
||||
},
|
||||
childrenDropLevel: 1
|
||||
},
|
||||
node13 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C3"
|
||||
}
|
||||
// stackChildren: true,
|
||||
},
|
||||
|
||||
node111 = {
|
||||
parent: node11,
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul>"
|
||||
},
|
||||
node112 = {
|
||||
parent: node11,
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
node113 = {
|
||||
parent: node11,
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1",
|
||||
HTMLclass: 'extra-title'
|
||||
}
|
||||
},
|
||||
|
||||
node121 = {
|
||||
parent: node12,
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
node131 = {
|
||||
parent: node13,
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
node132 = {
|
||||
parent: node13,
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
},
|
||||
|
||||
node1211 = {
|
||||
parent: node121,
|
||||
image: "image.png",
|
||||
text:{
|
||||
name: "c1_C1C2C1 jos malo textaaaaa"
|
||||
}
|
||||
},
|
||||
node1212 = {
|
||||
parent: node121,
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
node1213 = {
|
||||
parent: node121,
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
}
|
||||
},
|
||||
|
||||
ALTERNATIVE = [
|
||||
config,
|
||||
rootNode,
|
||||
node11,
|
||||
node12,
|
||||
node13,
|
||||
node111,
|
||||
node112,
|
||||
node113,
|
||||
node121,
|
||||
node131,
|
||||
node132,
|
||||
node1211,
|
||||
node1212,
|
||||
node1213
|
||||
];
|
||||
|
After Width: | Height: | Size: 543 B |
@@ -0,0 +1,27 @@
|
||||
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: #333; }
|
||||
|
||||
/* optional Container STYLES */
|
||||
.chart { height: 290px; margin: 5px; width: 400px; border: 2px solid #727564; border-radius: 3px; float: left; }
|
||||
|
||||
/* optional STYLES */
|
||||
.Treant > .node { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 8px; }
|
||||
|
||||
.Treant .extra-title { font-size: 20px; }
|
||||
.Treant > .node { background-color: gray; border: 2px solid #ccc; padding: 2px; border-radius: 2px; }
|
||||
.Treant > .redNode { background-color: red; }
|
||||
.Treant > .greenNode { background-color: green; }
|
||||
.Treant > .blueNode { background-color: blue; }
|
||||
.Treant > .cyan { background-color: cyan; height: 30px; width: 40px; }
|
||||
/*.Treant > .cyan { background-color: cyan; height: 0; width: 0; border: 0; padding: 0; overflow: hidden; }*/
|
||||
.Treant ul { padding-left: 17px; }
|
||||
|
||||
#NodeID { background-color: white; }
|
||||