- Data Format
Overview
Church Of God In Christ, Inc., Memphis, TN. The Church of God in Christ, Inc. (COGIC) is a Christian organization in the Holiness-Pentecostal tradition. Learn more at www.cogic.org. Church Of God In Christ, Inc., 930 Mason Street, Memphis, TN 38126. Follow these links to learn more about our foundation, ministries, administration, resources.
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
![Organizational Organizational](https://s-media-cache-ak0.pinimg.com/236x/9a/9f/96/9a9f96d8937a19c8af9711e29b1f94d0--organizational-chart-organizations.jpg)
Cogic Organizational Chart Image
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 allowHtml=true for this to work, and it must be set before calling draw() on the visualization. This overrides the selectionColor option for the specified node. Example: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00'); |
style | Applies To: DataTable row An inline style string to assign to a specific node. This is overridden by the selectedStyle property. You must set the option allowHtml=true for this to work, and it must be set before calling draw() on the visualization. This overrides the color option for the specified node. Example: myDataTable.setRowProperty(3, 'style', 'border: 1px solid green'); |
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 | Deprecated. Use selectedNodeClass instead. The background color of selected orgchart elements. Default: '#d6e9f8' |
size | '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 getSelection() implementation. Selection elements are all row elements. Can return more than one selected row. Return Type: Array of selection elements |
setSelection(selection) | Standard setSelection() implementation. Treats every selection entry as a row selection. Supports selection of mutiple rows. |
Cogic Organizational Chart Printable
Events
Name | |
---|---|
collapse | Event triggered when allowCollapse is set to true and the user double clicks on a node with children. 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 draw method, and call the methods only after the event is fired. None |
Data Policy
All code and data are processed and rendered in the browser. No data is sent to any server.