Recipe - Visual Org Chart

Skill level: Intermediate

Organization: Moving Communities to Christ

---

{# strip images & classes from the HTML but otherwise leave structure #} Rock comes with a stock "org chart" which is just a group tree. I was recently tasked with making this so our leadership could more easily follow.

I ended up using google charts to accomplish the task. 

It still leaves some to be desired, but it works for us to stop relying on a whiteboard in our senior pastor's office. 

The tree displays the Group Name and any leader in the group. 

known bugs:

1. If two areas in the tree have the same name the chart gets confused about how to structure the groups.
2. The chart is organized in alphabetical order. We had to use numbers to organized our divisions in the desired order. 

Here's how to accomplish this: 

1. Create a page that you want the org chart to be placed on
2. Add an HTML block and set the block properties to allow "RockEntitiy". 
3. Paste the code below making sure to update your "group type id" to match your systems org chart groups. 

        
  <style>
  table.google-visualization-orgchart-table {
    border-collapse: separate;
}

</style>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        
        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([

            {% group dynamicparameters:'ParentGroupId' where:'IsActive == True  && GroupTypeId == 28 Sort:'Name' %}
    {% for group in groupItems %}
                {% assign GName = group.Name %}
                {% assign GId = group.Id %}
                {% assign GLeader = '' %}
                {% assign GMember = '' %}
                {% groupmember where:'GroupId == {{group.Id}}'%}
                    {% for gm in groupmemberItems %}
                        {% if gm.GroupRole.IsLeader == 1 %}
                            {% assign GLeader = GLeader | Append:gm.Person.FullName %}
                            {% assign GLeader = GLeader | Append:'
' %}
                        {% else %}
                            {% assign GMember = GMember | Append:gm.Person.FullName %}
                            {% assign GMember = GMember | Append:'
' %}
                        {% endif %}
                    {% endfor %}
                {% endgroupmember %}
                {% assign GDescription = group.Description %}

                {% assign ParentGroup = group.ParentGroup %}
                {% assign GParentName = ParentGroup.Id %} 
        [{v:'{{ GId }}', f:'{{ GName }}
{{ GLeader }}
{{ GMember }}
'}, '{{ GParentName }}', '{{ GDescription }}'],    
        {% endfor %}
    {% endgroup %}
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
           chart.draw(data, {allowCollapse:true, allowHtml:true, 'size':'small'});

      }
    </script>
  
    <div id="chart_div"></div>
    

Screenshots

• /GetImage.ashx?guid=59efed68-06bd-4bf8-88ac-c7fa33eb8c75