You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.0 KiB
136 lines
3.0 KiB
<!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="index.css">
|
|
|
|
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
|
|
|
|
</head>
|
|
<body>
|
|
<div class="chart" id="OrganiseChart1">
|
|
<a href="http://www.treant-js.com/"></a>
|
|
</div>
|
|
<div class="chart" id="OrganiseChart2"></div>
|
|
<div class="chart" id="OrganiseChart3"></div>
|
|
<div class="chart" id="OrganiseChart4"></div>
|
|
<div class="chart" id="OrganiseChart5"></div>
|
|
|
|
<script src="../../vendor/jquery.min.js"></script>
|
|
<script src="../../vendor/jquery.mousewheel.js"></script>
|
|
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
|
|
|
|
<script src="../../vendor/raphael.js"></script>
|
|
|
|
<script src="../../Treant.js"></script>
|
|
<script src="example_configs.js"></script>
|
|
|
|
<script>
|
|
|
|
var UTIL = {
|
|
inheritAttrs: function(me, from) {
|
|
|
|
for (var attr in from) {
|
|
if(typeof from[attr] !== 'function') {
|
|
if(me[attr] instanceof Object && from[attr] instanceof Object) {
|
|
|
|
this.inheritAttrs( me[attr], from[attr] );
|
|
} else {
|
|
|
|
me[attr] = from[attr];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
createMerge: function(obj1, obj2) {
|
|
var newObj = {};
|
|
if(obj1) this.inheritAttrs( newObj, this.clone(obj1) );
|
|
if(obj2) this.inheritAttrs( newObj, obj2 );
|
|
return newObj;
|
|
},
|
|
|
|
clone: function (obj) {
|
|
if (Object(obj) !== obj) {
|
|
return obj;
|
|
}
|
|
var res = new obj.constructor();
|
|
for (var key in obj) if (obj["hasOwnProperty"](key)) {
|
|
res[key] = this.clone(obj[key]);
|
|
}
|
|
return res;
|
|
}
|
|
};
|
|
|
|
var T1 = new Treant(example1);
|
|
|
|
var example2 = UTIL.createMerge(
|
|
example1,
|
|
{
|
|
chart: {
|
|
container: "#OrganiseChart2",
|
|
rootOrientation: "EAST",
|
|
connectors: {
|
|
type: 'bCurve',
|
|
style: {
|
|
"stroke": 'green'
|
|
}
|
|
},
|
|
node: {
|
|
HTMLclass: 'blueNode'
|
|
}
|
|
}
|
|
}
|
|
);
|
|
var T2 = new Treant(example2);
|
|
|
|
var example3 = UTIL.createMerge(
|
|
example1,
|
|
{
|
|
chart: {
|
|
container: "#OrganiseChart3",
|
|
rootOrientation: "SOUTH",
|
|
connectors: {
|
|
type: 'straight',
|
|
style: {
|
|
"stroke": 'cyan'
|
|
}
|
|
},
|
|
node: {
|
|
HTMLclass: 'redNode'
|
|
}
|
|
}
|
|
}
|
|
);
|
|
var T3 = new Treant(example3);
|
|
|
|
var example4 = UTIL.createMerge(
|
|
example1,
|
|
{
|
|
chart:{
|
|
container: "#OrganiseChart4",
|
|
rootOrientation: "WEST",
|
|
connectors: {
|
|
type: 'step',
|
|
style: {
|
|
"stroke": 'yellow'
|
|
}
|
|
},
|
|
node: {
|
|
HTMLclass: 'greenNode'
|
|
}
|
|
}
|
|
}
|
|
);
|
|
var T4 = new Treant(example4);
|
|
|
|
var T5 = new Treant(ALTERNATIVE);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|