- Data Format
Church Of God In Christ, Inc., 930 Mason Street, Memphis, TN 38126. Follow these links to learn more about our foundation, ministries, administration, resources. © 2015 Michigan Southwest Third Ecclesiastical Jurisdiction COGIC Inc. 5304 Wise Rd. Lansing, MI 48911. (517) 882-2335. info@sw3micogic.com All Rights. The structure of a particular church isn't always clear, both to insiders and outsiders. You can avoid that problem with a church org chart, which shows how church leaders, officers, members and volunteers are organized to fulfill their duties. To visualize the organization of your own church, start with this free church org chart example and template. Sign up for a free Lucidchart account.
Overview
Org charts are diagrams of a hierarchy of nodes, commonly used to portray superior/subordinate relationships in an organization. A family tree is a type of org chart.
Example
Loading
The package name is 'orgchart'
.
The visualization's class name is google.visualization.OrgChart
.
Data Format
A table with three string columns, where each row represents a node in the orgchart. Here are the three columns:
- Column 0 - The node ID. It should be unique among all nodes, and can include any characters, including spaces. This is shown on the node. You can specify a formatted value to show on the chart instead, but the unformatted value is still used as the ID.
- Column 1 - [optional] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node.
- Column 2 - [optional] Tool-tip text to show, when a user hovers over this node.
Each node can have zero or one parent node, and zero or more child nodes.
Custom Properties
You can assign the following custom properties to data table elements, using the setProperty()
method of DataTable
:
Property Name | |
---|---|
selectedStyle | Applies To: DataTable row An inline style string to assign to a specific node when selected. You must set the option Example: |
style | Applies To: DataTable row An inline style string to assign to a specific node. This is overridden by the Example: |
Configuration Options
Name | |
---|---|
allowCollapse | Determines if double click will collapse a node. Default: false |
allowHtml | If set to true, names that includes HTML tags will be rendered as HTML. Default: false |
color | Deprecated. Use nodeClass instead. The background color of the orgchart elements. Default: '#edf7ff' |
nodeClass | A class name to assign to node elements. Apply CSS to this class name to specify colors or styles for the chart elements. Default: default class name |
selectedNodeClass | A class name to assign to selected node elements. Apply CSS to this class name to specify colors or styles for selected chart elements. Default: default class name |
selectionColor | Mccann big carbonator manual. Deprecated. Use selectedNodeClass instead. The background color of selected orgchart elements. Default: '#d6e9f8' |
size | Download paket ekonomi erlangga kelas 11. 'small', 'medium' or 'large' Default: 'medium' |
Methods
Method | |
---|---|
collapse(row, collapsed) |
Return Type: none |
draw(data, options) | Draws the chart. |
getChildrenIndexes(row) | Returns an array with the indexes of the children of the given node. Return Type Array.<number> |
getCollapsedNodes | Returns an array with the list of the collapsed node's indexes. |
getSelection() | Standard Return Type: Array of selection elements |
setSelection(selection) | Standard |
Events
Name | |
---|---|
collapse | Event triggered when collapsed - A boolean indicating whether this is a 'collapse' or 'expand' event. row - The zero-based index of the row in the data table, corresponding to the node being clicked. |
onmouseover | Triggered when the user hovers over a specific row. row - The zero-based index of the row in the data table, corresponding to the node being moused over. |
onmouseout | Triggered when the user hovers out of a row. row - The zero-based index of the row in the data table, corresponding to the node being moused out from. |
select | Standard select event None |
ready | The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the None |
Data Policy
Cogic Organizational Chart 2017
All code and data are processed and rendered in the browser. No data is sent to any server.