Organization Chart Component with Gradient Background for Nodes
Essential way to divide and conquer a problem
Introduction to an essential tool for web developers
Organization chart component with gradient background (with partial transparency) for nodes is still click-able.
Click on a node to go to the topic. Click (+/-) to expand/collapse. More screenshots.
Download Source Code of this article.
: Everything in the universe (and the universe itself) should
be explained/analyzed hierarchically.
Because that is the essential way of solving complex problems. Also knowledge comes from classification. This article explains why hierarchical representation (of data and facts) is important and how to do it. Specifically how to do it in applications and web pages using well-designed and comprehensive Unifosys Chart4.NET
How a reader decides whether to read an article or not. Firstly he will just have
a bird's eye view of the entire article. If he finds something that is interesting (to learn
or beneficial in some other way like you) to him, he will be tempted to read the
entire article in the context of his renewed interest.
This evaluation process has two important aspects - attracting
the right audience and avoiding the unintended audience. That is crucial because
it is important that you should not miss the right audience. If you read up to this
point, it is most probably because you find something when you fly over this.
What is hierarchy?
The hierarchy shows the relationship of various units. It is important in the design phase of a component or system.
- Hierarchy shows the inner-composition of an item or idea.
- It shows the components of an item and how that are bonded together.
- An item in the top shows the classification (where it belongs) of items below it.
Usually a hierarchy is represented by a chart. Common examples include:
Business Organizational Chart
Photo Organizational Chart
Company Organization Chart
City Organizational Chart
Market Organizational Chart
IT Organizational Chart
Corporate Organizational Chart
Human Resource Organization Chart
School Organizational Chart
Financial Organizational Chart
Team Organizational Chart
Police Organizational Chart
Hospital Organizational Chart
Sales Organizational Chart etc.
This long list itself tells us that everything can be hierarchical.
Why hierarchy is important?
It classifies the items or components. Our knowledge is classified data.
Using a hierarchy, we can change the way people think about a concept. A hierarchy conveys:
- It shows the intent of the total structure or concept.
- It describes knowledge; or knowledge comes from classification.
Which hierarchy matters?
There may more than one way to depict a system or concept. Consequently the details and depth of the resulting hierarchy may vary.
Mainly it depends on where the stress is and what is the point of view:
It has a little to do with the target audience too.
Normally there is no problem having more than one hierarchical representation, each describing a different stress or point of view.
- Stress means what you want to convey about the item.
- Point-of-view refers to the angle you view the object. Functional and structural hierarchies are best examples. In a photo collection you can have a one of chronological or person (family) at first level, and the other one in lower levels.
Whether level matters?
Yes, but in the sense that what all and how much it is expanded below that level (and
not about how much is above that level).
It seems most people doesn't like a hierarchy
at their workplace or even at home (if they are not at the top part!). They like people (and parents) are just be their
friends. Hierarchy is only second to that. And it is a lot true that a hierarchy-less
arrangement promotes creativity and freedom of expression. It is also true that
a hierarchy is essential, at least for the purpose of analysis and reporting.
Our discussion is
not primarily about organizational hierarchy. Still it is worthy to note that the
value of an item in the hierarchy is about how much it can be expanded (at least
When to use?
When it is required to analyze or modify something. It gives a bird's eye view of
the problem. When you want to quickly grasp the totality and to learn about it.
When you want to impress, or when you want to give a quick accessibility. Hierarchy analysis should be used for:
- System Analysis
- Suppose you have a complex problem at hand. And you need to find a solution to this problem. The first thing you may have to do is to find
a set of alternative solutions. Finally you have to find best out of them. But how to find the best? You have to split/componentize it in a hierarchical way. Then you have to give a weight (cost estimation/resource estimation) for each of the nodes, and calculate the total weight.
Finally you can decide the optimum solution based on the optimum weight.
- System Enhancements
- When you need to modify/revolutionize an existing system, then also need the existing hierarchy (the structural and functional ones). Based on that you can evaluate the existing system, and can suggest modifications as a mapping to a new better hierarchy.
Who to assign?
No much options are available on whom to be assigned the charge (on a sub-hierarchy):
- An expert on the subject of sub-hierarchy is required. It will cause a better detailed design and execution.
How to describe?
There are 2 different ways to depict a hierarchical categorization:
- Table of Contents
- You can represent the hierarchical structure using a table of contents structure, which is essentially a tree structure.
- Hierarchy Chart
- Alternately you can describe it using a hierarchical chart like this article. A hierarchy chart (also known as a structure chart/organization chart) has some advantages over a tree structure:
- Impression: It is a pictorial presentation; people have an inclination to pictures, because it can put a lot of eye-catching and stress customizations.
- Bird's-Eye View: It shows a better positioning of items in the chart.
- Totality: You can put additional information in the hierarchy chart (like photo, summary etc),
in a much readable format.
- Accessibility: Dynamic hierarchy charts can have hyperlinks to sub items and details.
There are 2 types of hierarchy charts:
- Static Hierarchy Charts
- Static charts can be created by many different diagramming tools (later-editable) like Microsoft Visio or drawing tools (less-editable) like Paint.NET or Windows Paint. The end point is that you can save the chart drawn to an image file.
There are some issues with static charts:
- Static behavior: It cannot have dynamic (or interactive) behavior from a
user point of view. To use it in web environment and to add some dynamism, still it has some work to define and maintain areas (assume you are or have the support of a web
- Possibility of expiry: Static hierarchy charts may expire soon, when the underlying data changes. It may be difficult to redraw it each time.
- Drawing effort: It may be tedious to determine the size/font/position etc. of nodes, and reapply the settings each time.
- Dynamic Hierarchy Charts
- Dynamic charts have a programming scenario. Once used in a computer program (application/website) it provides user a lot of features the charting component has. Most importantly dynamic charts will chart dynamic data (from a database or other data sources).
Advantages of dynamic charts are:
- Dynamic behavior: Dynamic charts are interactive. User can expand/collapse, zoom, see tooltip, and can navigate to more details
- Runtime data (Data Independency): It takes data from the source and draws the chart. So data can change irrespective of chart settings.
- Automatic drawing: It draws and layout automatically depending on the volume of data.
The above advantages are provided by chart-specific features like
resizable, movable (through a margin), tool tips, layouts, views, expand and collapse parts, automatic sub charts etc. This interactivity is important for a hierarchy chart (than other type of charts), because hierarchy charts have a more complex layout. Unifosys Chart4.NET is such a dynamic and automatic component for .NET developers. It has a free version too for web developers, which is used in this article.
What to do?
Next time when you design/write/think of something then think of its hierarchy and its position in a still large hierarchy first. Then you will have a full set of ideas. Now you may be doing the same, but probably without much thinking on that.
If you are a programmer, think of utilizing Unifosys Chart4.NET to provide runtime dynamic hierarchy charts to your users.