-
Notifications
You must be signed in to change notification settings - Fork 21
/
demo-example-5.html
128 lines (107 loc) · 7.01 KB
/
demo-example-5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>lib_ggOrgChart v1.0.0beta1 example 5</title>
<script type='text/javascript' src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jspdf-ggorgchart.js" ></script>
<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="StackBlur.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<script type="text/javascript" src="raphael-ggorgchart.js"></script>
<script type="text/javascript" src="lib_gg_orgchart_v100b1.js"></script>
<script type="text/javascript" src="drag-on.js"></script>
<script type="text/javascript" src="jsrender.js"></script>
<script type="text/javascript">
// these values define only a subset of options for the organizational chart look & feel
// look into the library code for the default values for each parameter, that are used if not defined here
// "box_click_handler" will not work if we set "box_html_template", so we assigns it the null value
// see demo 2 for more about options
//
var oc_options = {
data_id : 1, // identifies the ID of the "data" JSON object that is paired with these options
container : 'oc_container_2', // name of the DIV where the chart will be drawn
box_color : '#aaf', // fill color of boxes
box_color_hover : '#faa', // fill color of boxes when mouse is over them
box_border_color : '#008', // stroke color of boxes
box_html_template : null, // id of element with template; don't use if you are using the box_click_handler
line_color : '#f44', // color of connectors
title_color : '#000', // color of titles
subtitle_color : '#707', // color of subtitles
max_text_width : 20, // max width (in chars) of each line of text ('0' for no limit)
text_font : 'Courier', // font family to use (should be monospaced)
use_images : false, // use images within boxes?
box_click_handler : oc_box_click_handler, // handler (function) called on click on boxes (set to null if no handler)
use_zoom_print : false, // wheter to use zoom and print or not (only one graph per web page can do so)
debug : false // set to true if you want to debug the library
};
// handler for clicks on nodes
//
function oc_box_click_handler(event, box) {
if (box.oc_id !== undefined) {
alert('clicked on node with ID = ' + box.oc_id + '; type = ' + box.oc_node.type);
}
}
// load the JSON that defines the organizational structure from an external file and inmediatelly render the chart
// this is an important modification to the 0.4 version of the library; now is imperative to load the JSON from an external file
// inside the JSON, the "type" attribute for nodes can be: "subordinate", "staff" or "collateral"
// you can also use the "subtype" attribute for "dashed" nodes (use "subtype:dashed")
// look the examples and get used to the organizational structure representation
//
// IMPORTANT NOTE: because the JSON containing the organizational chart hierarchy is loaded using JQuery (that uses AJAX),
// this library will work only by loading the JSON from an http server (and not by opening a local file in your browser)
// the advantage are: separating data and logic, and capability of generating a dynamic JSON from a database (ex. with PHP)
//
function ggOrgChart_render ()
{
var result;
// result = ggOrgChart.render(oc_options, "demo-congregacion.json"); // static JSON definition
result = ggOrgChart.render(oc_options, "build-json.php"); // dynamic JSON generation
if (result === false) { alert("INFO: render() failed (bad 'options' or 'data' definition)"); }
}
// WINDOW.ONLOAD TASKS
// put here all the task that should be done when the page finish to load
// also put here handlers for buttons (like zoom and print), etc.
//
window.onload = function () {
// call the function 'ggOrgChart_render()' defined in this page (just above)
//
ggOrgChart_render();
} ;
</script>
<style>
.body { margin: 10px; padding: 0; }
.text { font-family: sans-serif; color: blue; text-align: left; }
</style>
</head>
<body class="body">
<!--div-->
<div class="text">
<h1>Organizational Chart Demo (5)</h1>
<p>This example works by generating the JSON orgchart definition on-the-fly by using a PHP scripts that queries
a database and buils the tree.
<p>The structure is the same as demo #2, but you can see in this file's source code
(line 68) that the orgchart structure is obtained from build-json.php, which is called by the library using AJAX.
<p>How to replicate this demo in your own server:
<ul>
<li>Download the <a href="demo-example-5.html">HTML file</a> you are looking now (right-click on the link and saveAs/saveLinkAs).</li>
<li>Select a MySQL database and create a table with <a href="demo-congregacion-anonymous.sql">this structure and content</a>.</li>
<li>Download <a href="build-json.txt">build-json.php</a> (change the .txt extension to .php after downloading).</li>
<li>Customize build-json.php with your MySQL database access credentials (database, user, password).</li>
<li>Test that your build-json.php works by invoking it directly from the browser; it should produce <a href="build-json.php">something like this</a>.</li>
<li>You can pass arguments to the PHP script for setting orgchart properties like <a href="build-json.php?ocId=999&ocTitle=A+Different+Orchart+Title">this call</a> does.</li>
</ul>
<p>Now you can use a MySQL table editor like PhpMyAdmin or <a href="http://librerias.logicas.org/crudder">CRUDDER</a> for modifying the data and your web will be updated inmediately!
<!--p>Note: at this time you won't find the PHP script in neither the github repository nor the library download section.</p-->
</div>
<hr/>
<h3><span class="text">Rendering</span></h3>
<div id="oc_container_2" class="chart_container"></div>
<hr/>
<h3><span class="text">End of rendering</span></h3>
<p class="text"><a target="_blank" href="http://librerias.logicas.org/lib_gg_orgchart/">lib_gg_orgchart v1.0.0beta1</a> -
by <a target="_blank" href="http://desarrolladores.logicos.org/gorka/">Gorka G LLona</a> and collaborators -
distributed under the LGPL GNU license</p>
<!--/div-->
</body>
</html>