paco
This commit is contained in:
+31
@@ -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;
|
||||
}
|
||||
+220
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
*/
|
||||
+22
@@ -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>
|
||||
Reference in New Issue
Block a user