<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 600px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/simpsons.js'></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var cfg = [{
type: 'node',
id: 'n1',
cls: 'fam',
text: ' ',
dataFullName: ''
},
{
type: 'node',
id: 'homer',
text: 'Homer',
dataFullName: 'Homer Simpson',
style: {
backgroundImage: SIMPSONS.homer
}
},
{
type: 'node',
id: 'marge',
text: 'Marge',
dataFullName: 'Marge Simpson',
style: {
backgroundImage: SIMPSONS.marge
}
},
{
type: 'node',
id: 'lisa',
text: 'Lisa',
dataFullName: 'Lisa Simpson',
style: {
backgroundImage: SIMPSONS.lisa
}
},
{
type: 'node',
id: 'bart',
text: 'Bart',
dataFullName: 'Bart Simpson',
style: {
backgroundImage: SIMPSONS.bart
}
},
{
type: 'node',
id: 'maggie',
text: 'Maggie',
dataFullName: 'Maggie Simpson',
style: {
backgroundImage: SIMPSONS.maggie
}
},
{
type: 'node',
id: 'santa',
text: 'Helper',
dataFullName: 'Santa\'s Little Helper',
style: {
backgroundImage: SIMPSONS.santa
}
},
{
type: 'node',
id: 'n2',
cls: 'fam',
text: ' ',
dataFullName: ''
},
{
type: 'node',
id: 'mona',
text: 'Mona',
dataFullName: 'Mona Simpson',
style: {
backgroundImage: SIMPSONS.mona
}
},
{
type: 'node',
id: 'herb',
text: 'Herb',
dataFullName: 'Herb Simpson',
style: {
backgroundImage: SIMPSONS.herb
}
},
{
type: 'node',
id: 'abraham',
text: 'Abraham',
dataFullName: 'Abraham Simpson',
style: {
backgroundImage: SIMPSONS.abraham
}
},
{
type: 'node',
id: 'n3',
cls: 'fam',
text: ' ',
dataFullName: ''
},
{
type: 'node',
id: 'patty',
text: 'Patty',
dataFullName: 'Patty Bouvier',
style: {
backgroundImage: SIMPSONS.patty
}
},
{
type: 'node',
id: 'clancy',
text: 'Clancy',
dataFullName: 'Clancy Bouvier',
style: {
backgroundImage: SIMPSONS.clancy
}
},
{
type: 'node',
id: 'jaqueline',
text: 'Jaqueline',
dataFullName: 'Jaqueline Bouvier',
style: {
backgroundImage: SIMPSONS.jaqueline
}
},
{
type: 'node',
id: 'selma',
text: 'Selma',
dataFullName: 'Selma Bouvier',
style: {
backgroundImage: SIMPSONS.selma
}
},
{
type: 'node',
id: 'n4',
cls: 'fam',
text: ' ',
dataFullName: ''
},
{
type: 'node',
id: 'ling',
text: 'Ling',
dataFullName: 'Ling Bouvier',
style: {
backgroundImage: SIMPSONS.ling
}
},
{
type: 'link',
source: 'n1',
target: 'homer'
},
{
type: 'link',
source: 'n1',
target: 'marge'
},
{
type: 'link',
source: 'n1',
target: 'bart'
},
{
type: 'link',
source: 'n1',
target: 'lisa'
},
{
type: 'link',
source: 'n1',
target: 'maggie'
},
{
type: 'link',
source: 'n1',
target: 'santa'
},
{
type: 'link',
source: 'n2',
target: 'homer'
},
{
type: 'link',
source: 'n2',
target: 'mona'
},
{
type: 'link',
source: 'n2',
target: 'herb'
},
{
type: 'link',
source: 'n2',
target: 'abraham'
},
{
type: 'link',
source: 'n3',
target: 'marge'
},
{
type: 'link',
source: 'n3',
target: 'patty'
},
{
type: 'link',
source: 'n3',
target: 'selma'
},
{
type: 'link',
source: 'n3',
target: 'clancy'
},
{
type: 'link',
source: 'n3',
target: 'jaqueline'
},
{
type: 'link',
source: 'n4',
target: 'selma'
},
{
type: 'link',
source: 'n4',
target: 'ling'
},
]
var cdata = {
type: 'tree',
plotarea: {
margin: 40
},
source: {
align: 'left',
text: 'Original idea by http://bmdata.co.uk/simpsons/'
},
options: {
aspect: 'graph',
springLength: 75,
attractionConstant: 0.8,
repulsionConstant: 4000,
repulsionDistanceFactor: 20,
node: {
size: 24,
borderWidth: 3,
borderColor: '#036',
backgroundColor: '#fff',
backgroundRepeat: 'no-repeat',
backgroundScale: 0.75,
label: {
color: '#000',
fontWeight: 'bold',
offsetY: 35
},
tooltip: {
text: '%data-full-name'
}
},
'node[cls-fam]': {
size: 12,
borderWidth: 2,
borderColor: '#000',
backgroundColor: '#ccc',
label: {
visible: false
}
},
link: {
lineWidth: 2,
lineColor: '#666'
}
},
series: cfg
};
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
output: 'canvas',
data: cdata
});
</script>
</body>
</html>
var cfg = [
{type : 'node', id : 'n1', cls : 'fam', text : ' ', dataFullName : ''},
{type : 'node', id : 'homer', text : 'Homer', dataFullName : 'Homer Simpson', style : { backgroundImage : SIMPSONS.homer }},
{type : 'node', id : 'marge', text : 'Marge', dataFullName : 'Marge Simpson', style : { backgroundImage : SIMPSONS.marge }},
{type : 'node', id : 'lisa', text : 'Lisa', dataFullName : 'Lisa Simpson', style : { backgroundImage : SIMPSONS.lisa }},
{type : 'node', id : 'bart', text : 'Bart', dataFullName : 'Bart Simpson', style : { backgroundImage : SIMPSONS.bart }},
{type : 'node', id : 'maggie', text : 'Maggie', dataFullName : 'Maggie Simpson', style : { backgroundImage : SIMPSONS.maggie }},
{type : 'node', id : 'santa', text : 'Helper', dataFullName : 'Santa\'s Little Helper', style : { backgroundImage : SIMPSONS.santa }},
{type : 'node', id : 'n2', cls : 'fam', text : ' ', dataFullName : ''},
{type : 'node', id : 'mona', text : 'Mona', dataFullName : 'Mona Simpson', style : { backgroundImage : SIMPSONS.mona }},
{type : 'node', id : 'herb', text : 'Herb', dataFullName : 'Herb Simpson', style : { backgroundImage : SIMPSONS.herb }},
{type : 'node', id : 'abraham', text : 'Abraham', dataFullName : 'Abraham Simpson', style : { backgroundImage : SIMPSONS.abraham }},
{type : 'node', id : 'n3', cls : 'fam', text : ' ', dataFullName : ''},
{type : 'node', id : 'patty', text : 'Patty', dataFullName : 'Patty Bouvier', style : { backgroundImage : SIMPSONS.patty }},
{type : 'node', id : 'clancy', text : 'Clancy', dataFullName : 'Clancy Bouvier', style : { backgroundImage : SIMPSONS.clancy }},
{type : 'node', id : 'jaqueline', text : 'Jaqueline', dataFullName : 'Jaqueline Bouvier', style : { backgroundImage : SIMPSONS.jaqueline }},
{type : 'node', id : 'selma', text : 'Selma', dataFullName : 'Selma Bouvier', style : { backgroundImage : SIMPSONS.selma }},
{type : 'node', id : 'n4', cls : 'fam', text : ' ', dataFullName : ''},
{type : 'node', id : 'ling', text : 'Ling', dataFullName : 'Ling Bouvier', style : { backgroundImage : SIMPSONS.ling }},
{type : 'link', source : 'n1', target : 'homer'},
{type : 'link', source : 'n1', target : 'marge'},
{type : 'link', source : 'n1', target : 'bart'},
{type : 'link', source : 'n1', target : 'lisa'},
{type : 'link', source : 'n1', target : 'maggie'},
{type : 'link', source : 'n1', target : 'santa'},
{type : 'link', source : 'n2', target : 'homer'},
{type : 'link', source : 'n2', target : 'mona'},
{type : 'link', source : 'n2', target : 'herb'},
{type : 'link', source : 'n2', target : 'abraham'},
{type : 'link', source : 'n3', target : 'marge'},
{type : 'link', source : 'n3', target : 'patty'},
{type : 'link', source : 'n3', target : 'selma'},
{type : 'link', source : 'n3', target : 'clancy'},
{type : 'link', source : 'n3', target : 'jaqueline'},
{type : 'link', source : 'n4', target : 'selma'},
{type : 'link', source : 'n4', target : 'ling'},
]
var cdata = {
type : 'tree',
plotarea : {
margin : 40
},
source : {
align : 'left',
text : 'Original idea by http://bmdata.co.uk/simpsons/'
},
options : {
aspect : 'graph',
springLength : 75,
attractionConstant : 0.8,
repulsionConstant : 4000,
repulsionDistanceFactor : 20,
node : {
size : 24,
borderWidth : 3,
borderColor : '#036',
backgroundColor : '#fff',
backgroundRepeat : 'no-repeat',
backgroundScale : 0.75,
label : {
color : '#000',
fontWeight : 'bold',
offsetY : 35
},
tooltip : {
text : '%data-full-name'
}
},
'node[cls-fam]' : {
size : 12,
borderWidth : 2,
borderColor : '#000',
backgroundColor : '#ccc',
label : {
visible : false
}
},
link : {
lineWidth : 2,
lineColor : '#666'
}
},
series : cfg
};
zingchart.render({
id : 'myChart',
width : '100%',
height : '100%',
output : 'canvas',
data : cdata
});