Page 1 of 1

How to render an organizational chart (OrgChart) in AppGini

Posted: 2018-12-24 07:36
by jsetzer
Good morning AppGineers!

A couple of days ago I had to model a hierarchical tree of organizational units (OU) and wanted to give the users a visual presentation. I have found this JQuery library which is quite easy to use and to integrate into appgini:

https://github.com/dabeng/OrgChart

This is the result right within my "nodes" table view:
chrome_2018-12-24_07-36-53.png
chrome_2018-12-24_07-36-53.png (32.84 KiB) Viewed 5045 times

There are many demos and code samples of how to use the library:

The simplest way is to build a list of items with nested lists in HTML as shown in the sample code below:

1. Add the script

Code: Select all

<script type="text/javascript" src="js/jquery.orgchart.js"></script>

2. Add a container

Code: Select all

<div id="chart-container"></div>
3. Add your hierarchy using html-lists (ul/li)

You can use AppGini's sql() function in PHP to retrieve the required data from your database. It can be a node structure (parent/child) or any other related records. Use PHP to generate an unordered list <ul> with list items <li>. For branches you will have to place another <ul> within an existing <li></li>.

This is sample data from one of their demo pages:

Code: Select all

<ul id="ul-data">
    <li>Lao Lao
      <ul>
        <li>Bo Miao</li>
        <li>Su Miao
          <ul>
            <li>Tie Hua</li>
            <li>Hei Hei
              <ul>
                <li>Pang Pang</li>
                <li>Xiang Xiang</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  
4. Render

Let the library render the chart based on your data.

Code: Select all

<script type="text/javascript">
    $(function() {

      $('#chart-container').orgchart({
        'data' : $('#ul-data')
      });

    });
  </script>
You can also add links to every node so the chart becomes interactive. You can see this in action here:
(The screen-recording is too large for uploading here. Sorry for inconveniance!)

https://www.bizzworxx.de/2018-12-24_08-11-35/


Best regards,
Jan

PS: The library supports drag & drop of nodes. On a drop-event you can POST the id of the dragged-node and the id of the drop-target-node to the server using AJAX and update your database.

PPS: I wish you a peaceful time and a happy new year.
Best wishes to all of you from Kiel/Northern Germany!

Re: How to render an organizational chart (OrgChart) in AppGini

Posted: 2018-12-26 05:43
by jsetzer
4. Render

Let the library render the chart based on your data.

<script type="text/javascript">
$(function() {

$('#chart-container').orgchart({
'data' : $('#ul-data')
});

});
</script>
Sorry, I have overseen one detail when I was copying and wasting this sample code here:

In step 4 you have to use "$j" instead of "$". So here is the same script for AppGini developers:

Code: Select all

<script type="text/javascript">
  $j(function() {

    $j('#chart-container').orgchart({ 
      'data': $j('#ul-data')
    });
  });
</script>
Best regards,
Jan

Re: How to render an organizational chart (OrgChart) in AppGini

Posted: 2019-01-03 14:28
by a.gneady
That's awesome! Thanks a lot for sharing, Jan ^_^