Organization Chart from Database/Datatable/XML Chart4.NET

 Organization Chart from Database using Chart4.NET Organization Chart Control

 Chart4.NET - Documentation  | Online-Demo  | Screens
Questions or suggestions? Quick Contact

The Chart4.NET component is a .NET assembly that you can use in Desktop (winform) and ASP.NET (webform) projects.

Database Samples

New Chart4.NET control has better support for node tags and tag based (group) customization.
Download source code for Winform database project. For webform sample and online demo, goto Database Sample (webform).

org chart customization (database sample)

Database Setup:

  1. Open SQL Server Management Studio or a Query Editor.
  2. Create a database named 'test1'.
  3. Copy the table creation SQL below and paste the SQL into the query editor window and 'Execute' to create the table.
    CREATE TABLE [dbo].[Parc1]( [id] [nvarchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL, [pid] [nvarchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [txt] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL, [duty] [varchar](100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [value] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [tooltip] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [imagefile] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [category] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ) ON [PRIMARY]
  4. Insert some data similar to the one in the following table: org chart in toolbox
    You can copy and paste the data to a database table from the 'DB Setup' screen within the Database Sample main screen: org chart customization (database setup)

DataTable Usage:

Instead of directly loading from database, you can populate chart from a datatable that is created from any source of data:

Note 1: The datatable column names can be anything you like. Only the order of values in datatable rows is important. The first column is taken as ID, second one as PARENT-ID and so on, as described in the table below.

Column1 & Column2ID & ParentID respectivelyRepresent the hiearchical realtionship of data items.Two items having the same parentID are children of the item which has that ParentID as its ID.
Column3Text+DescriptionThe title text and additional lines of text separated by \n.Separate using \n. You have to set hpcSettings.Node_IsDataHasText = true; to apply separate formatting for title and additional lines of text (see the sample).
 Column4NameName of the node. If not given, a default value will be assigned.The value given will be returned (on clicking the nodes) and can be further processed to show the next page/frame/window/form of information (see the sample). To be applicable, you have to set hpDrillDownMode anything other than Navigate (see the sample). If you set hpDrillDownMode as  'JavaScript'; in that case you have to define a javascript function with 1 argument, in the scope of the webpage, namely nodeOnClick(nodname). Name will also be used in cases where DrillDownMode is  NavigateNode (client-side for web request) or is PostBack (server-side).
Column5TooltipNormal rectangular box tooltip to show on the node. Has nothing to do with rich node-tooltip (hpShowToolTipNode)If not given, the node text will be shown, if HierarchyWeb1.hpShowToolTip = true;
Column6PhotoPhoto name. Photo will be loaded according to PhotoSpecification settings You can load from files, by specifying a realative path in PhotoSpecification and photo name here (see the sample). Else you can make an imagelist from files or database table streams, and can assign it. See DesignerSample (winform) to see how to make an imagelist and how to use it
Column7URLThe web address to navigate (client-side without a postback) on clicking the node.To be applicable, you have to set HierarchyWeb1.hpDrillDownMode=Navigate (see the sample).
Column8TagTag is used to categorize the nodes like Director, Manager, etc.You can customize nodes by assigning custom brushes and other settings for tags (see the sample).

Note 2: You can give empty string for items that has no specific value (except first 3 columns of values; still root item(s) have PARENTID as blank).

Note 3: See the DatabaseSampleWeb for usage example for ASP.NET application. See DatabaseSample for winform sample (all columns except URL apply for winform control).

Related Articles

  • How To Create Organization Chart from Mutiple Tables
  • Sample Downloads

  • Download an appropriate sample here (no installation required): Sample Downloads
  • Web Control Demo | Web Control Demo (Advanced) | Web Control Demo (Database)
  • Library Downloads

  • Library (demo version) is included in Sample Downloads

  • © 2016, Unifosys