Skip to content

Instantly share code, notes, and snippets.

@iAugur

iAugur/Orgchart.html

Created July 1, 2022 17:38
Show Gist options
  • Save iAugur/e61cd106cd72601dba86fe9d02c57716 to your computer and use it in GitHub Desktop.
Save iAugur/e61cd106cd72601dba86fe9d02c57716 to your computer and use it in GitHub Desktop.
Download ZIP
Organisation diagram with Raphaeljs
Raw
Orgchart.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Organisation Chart</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
</body>
</html>
Raw
Orgchart.js
var tomb = [
{text: "Head Director", text_x_offset: 60, text_y_offset: 10, x: 155, y :10},
{text: "IT Director", text_x_offset: 65, text_y_offset: 10, x : 25, y: 65},
{text: "General Director", text_x_offset: 50, text_y_offset: 10, x: 285, y : 65},
{text: "Management", text_x_offset: 60, text_y_offset: 10, x: 45, y : 120},
{text : "Special Collections", text_x_offset: 42, text_y_offset: 10, x : 265, y: 120},
{text : "Quality Assurance Rapporteur", text_x_offset: 15, text_y_offset: 20, x: 155, y: 175},
{text : "Quality Assurance Assistant", text_x_offset: 15, text_y_offset: 10, x: 155, y: 230},
{text : "Department of IT Development", text_x_offset: 10, text_y_offset: 4, x: 45, y : 305},
{text : "Department of Reference", text_x_offset: 25, text_y_offset: 4, x: 45, y: 360},
{text : "Department of Subject Librarians", text_x_offset: 5, text_y_offset: 35, x: 45, y: 415},
{text : "Department of Reader Service", text_x_offset: 15, text_y_offset: 30, x: 265, y: 305},
{text : "Department of Acquiring", text_x_offset: 30, text_y_offset: 18, x: 265, y: 360},
{text : "Department of Processing", text_x_offset: 20, text_y_offset: 45, x: 265, y: 415},
{text : "Department of Technical Services", text_x_offset: 3, text_y_offset: 15, x: 265, y: 470}
];
var global_y_offset = 20;
var paper = Raphael("container", 500, 520);
var line1 = paper.path("M250,40 v45 h-35 m35,0 h35 M250,80 v60 h-15 h30 M250,135 v105 M25,85 h-25 m0,0 v240 h45 m-45,0 v55 h45 m-45,0 v55 h45 M474,85 h25 v240 h-45 m45,0 v55 h-45 m45,0 v55 h-45 m45,0 v55 h-45 m0,0 z");
line1.attr({stroke: "#ccc", "stroke-width": 1});
line1.translate(0.5, 0.5);
tomb.forEach(item => {
console.log(item.text);
var r= paper.rect(0,0,190,40).attr({fill : "#fff", stroke: "#ccc"}).translate(0.5, 0.5);
var t= paper.text(0,0, item.text).data("data", item);
var data = t.data("data");
var group = paper.set();
group.push(r,t).attr({x : data.x, y : data.y, title : item.text, cursor: "pointer"});
t.attr({x: data.x + item.text_x_offset, y : data.y + global_y_offset , "text-anchor" : "start", "font-size": "12", "font-family" : "Arial"});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment