Unifosys Analytics - Data Visualization Systems

1. Organization Chart with Photo for Levels


// CHART DATA
// url attribute is not mandatory in the following xml, and is not needed in Winform control
// Either load data from file like:
// string sPath = Request.Url.GetLeftPart(UriPartial.Authority); // webform control
// string sResult = HierarchyWeb1.hpcData.LoadFromXmlFile( sPath + "/sample.xml" );
// OR from inline XML as follows:

hierarchyWin1.hpDataXml = @"<?xml version='1.0' encoding='utf-16'?>
<chart>
  <settings PhotoPath='' PhotoSpecification='UsePhoto_ImageList4Levels' />
  <data>
    <item text='Everything is Hierarchical' url='#idEisH'>
      <item text='What is hierarchy?' url='#idWhat'>
        <item text='Structure' url='#idStruct'/>
      </item>
    </item>
  </data>
</chart>";

hierarchyWin1.hpcSettings.Node_IsSpaceNewLine = true; // split each word to a new line
hierarchyWin1.hpcData.ExpandAll(); // will be refreshed too

// SETTINGS
// imageList1 is added to the form, and pictures already added
hierarchyWin1.hpcSettings.Photo_ImageList4Levels = imageList1;
hierarchyWin1.hpcSettings.Text_HorizontalAlign = AlignHorizontalType.Right;
hierarchyWin1.hpcSettings.Node_IsDataHasText = true;

2. Organization Chart with Rich-Tooltip and Preview


//reset any previous settings of image, since priotity is for this
hierarchyWin1.hpcSettings.Photo_ImageList4Levels = null;

//to better view the photo, place texts at right, and bottom if required
hierarchyWin1.hpcSettings.Text_HorizontalAlign = AlignHorizontalType.Right;
hierarchyWin1.hpcSettings.Title_HorizontalAlign = AlignHorizontalType.Right;
hierarchyWin1.hpcSettings.Title_VerticalAlign = AlignVerticalType.Bottom;

//show rich tooltip and hide normal tooltip
hierarchyWin1.hpcToolTip.NodeToolTip.Show = true;
hierarchyWin1.hpcToolTip.NormalToolTip.Show = false;

//Enable hyperlinking and Add hyperlinking to first 3 lines of text
hierarchyWin1.hpcSettings.Node_HyperlinkEnabled = true;
hierarchyWin1.hpcSettings.Node_HyperlinkEnabledList.Add(true);

3. Organization Chart with Semi-transparent Node and Tooltip


//add a Stock background type to Node_BackgroundTypeList
hierarchyWin1.hpcSettings.Node_BackgroundTypeList.Clear();
hierarchyWin1.hpcSettings.Node_BackgroundTypeList.Add(BackgroundType.Stock);

hierarchyWin1.hpcSettings.Node_ImageTransparency = 6; //0-255 (0 means full transparent)
hierarchyWin1.hpcSettings.Node_BackgroundStockList.Add(BackgroundTemplate.YellowBricks);

//show rich tooltip and hide normal tooltip
hierarchyWin1.hpcToolTip.NodeToolTip.Show = true;
hierarchyWin1.hpcToolTip.NodeToolTip.IsTransparent = true; //transparent tooltip
hierarchyWin1.hpcToolTip.NormalToolTip.Show = false;

4. Organization chart with gradient background for node and partial transparency


hierarchyWin1.hpcSettings.Node_BackgroundTypeList.Clear();
hierarchyWin1.hpcSettings.Node_BackgroundTypeList.Add(BackgroundType.Brush);

HierarchyBrush hbr2 = new HierarchyBrush();
hbr2.BrushType = BrushType.LinearGradientBrush;
hbr2.Color1Transparency = 45; //0-255 partial transparency
hbr2.GradientOrientation = GradientModeType.SigmaBell;

hierarchyWin1.hpcSettings.Node_BackgroundBrushList.Add(hbr2);

5. Organization Chart from Left to Right


hierarchyWin1.hpcSettings.Chart_Orientation = OrientationType.LeftToRight;

6. Shaded Organization Chart


hierarchyWin1.hpcSettings.Chart_Style = ChartStyleType.Shaded;

7. 3D Organization Chart


hierarchyWin1.hpcSettings.Chart_Style = ChartStyleType.ThreeD;

8. Fully Transparent Nodes


HierarchyBrush hbr = new HierarchyBrush();
hbr.BrushType = BrushType.SolidBrush;
hbr.Color1Transparency = 0; //0-255 transparent node

hierarchyWin1.hpcSettings.Node_BackgroundBrushList.Add(hbr);

//To make only the second level of nodes, circular
hierarchyWin1.hpcSettings.Node_BorderShapeList.Add(BorderShapeType.GradientRectangle); //level 1
hierarchyWin1.hpcSettings.Node_BorderShapeList.Add(BorderShapeType.Circle); //level 2

9. Transparent Tooltip


hierarchyWin1.hpcToolTip.NodeToolTip.Show = true;
hierarchyWin1.hpcToolTip.NodeToolTip.IsTransparent = true;
hierarchyWin1.hpcToolTip.NormalToolTip.Show = false;

10. Organization Chart with Gradient Background


HierarchyBrush hbr3 = new HierarchyBrush();
hbr3.BrushType = BrushType.CircularGradientBrush;
hbr3.GradientOrientation = GradientModeType.SigmaBell;
hbr3.Color1 = Color.Khaki;
hbr3.Color1Transparency = 55;
hbr3.Color2 = Color.LightSeaGreen;

hierarchyWin1.hpcSettings.Chart_BackgroundBrush = hbr3;

11. Organization Chart with Node Tag Based (Group) Customization


string sQuery = @"SELECT    id AS Id,
    pid AS ParentId,
    txt + '\n' + IsNull(duty,'') AS [text],
    txt AS [value],
    tooltip AS tooltip,
    imagefile AS photo,
    '' AS url,
    (CASE category WHEN 'D' THEN 'Director' WHEN 'M' THEN 'Manager' WHEN 'E' THEN 'Executive' END) AS tag
FROM    Parc1";

See Database Sample (Winform/webform) in Samples for the full source code.

12. Try Your Own - Organization Chart Designer Sample

It is really simple to get started, and to experiment with chart customizations. Download the free hierarchy-chart designer sample (winform) project from Samples (no installation required) to experiment with the chart control features.


// CHART DATA
// url attribute is not mandatory in the following xml, and is not needed in Winform control
// Either load data from file like:
// string sPath = Request.Url.GetLeftPart(UriPartial.Authority);//webform control
// string sResult = HierarchyWeb1.hpcData.LoadFromXmlFile( sPath + "/sample.xml" );
// OR from inline XML as follows:

hierarchyWin1.hpDataXml = @"<?xml version='1.0' encoding='utf-16'?>
<chart>
  <settings PhotoPath='' PhotoSpecification='UsePhoto_ImageList4Levels' />
  <data>
    <item text='Everything is Hierarchical' url='#idEisH'>
      <item text='What is hierarchy?' url='#idWhat'>
        <item text='Structure' url='#idStruct'/>
        <item text='Organization' url='#idOrgn'/>
        <item text='Classification' url='#idClass'/>
      </item>
      <item text='Why hierarchy is important?' url='#idWhy'>
        <item text='Intention' url='#idInt'/>
        <item text='Knowledge' url='#idKnow'/>
      </item>
      <item text='Which hierarchy matters?' url='#idWhich'>
        <item text='Stress' url='#idStress'/>
        <item text='Point of View' url='#idPOV'/>
      </item>
      <item text='Whether level matters?' url='#idWhether'/>
      <item text='When to use?' url='#idWhen'>
        <item text='Analyse' url='#idAna'/>
        <item text='Modify' url='#idMod'/>
      </item>
      <item text='Who to assign?' url='#idWho'>
        <item text='Sub-expert' url='#idExpert'/>
      </item>
      <item text='How to describe?' url='#idHow'>
        <item text='Table of Contents' url='#idTable'/>
        <item text='Hierarchy-Chart\nImpression\nBird`s-Eye View\nTotality\nAccessibilty' url='#idHC'>
          <item text='Static diagrammming /Drawing' url='#idHCs'/>
          <item text='Dynamic programming' url='#idHCd'/>
        </item>
      </item>
      <item text='What to do?' url='#idWhatTo'/>
    </item>
  </data>
</chart>";

hierarchyWin1.hpcSettings.Node_IsSpaceNewLine = true; //split each word to a new line
hierarchyWin1.hpcData.ExpandAll(); //will be refreshed too

// SETTINGS
// imageList1 is added to the form, and pictures already added
// alternately you can create a System.Windows.Forms.ImageList object, and can add disk files to it
// To get clear photos in nodes, set appropriate ImageSize (preferably 48x48) and 
// ColorDepth (preferably Depth32Bit) properties of ImageList (before adding images to it).
hierarchyWin1.hpcSettings.Photo_ImageList4Levels = imageList1;

// to better view the photo, place texts at right, and bottom if required
hierarchyWin1.hpcSettings.Text_HorizontalAlign = AlignHorizontalType.Right;
hierarchyWin1.hpcSettings.Title_HorizontalAlign = AlignHorizontalType.Right;
hierarchyWin1.hpcSettings.Title_VerticalAlign = AlignVerticalType.Bottom;

// distinguish title and text
hierarchyWin1.hpcSettings.Node_IsDataHasText = true; //default is true

Download Designer Sample

Chart4.NET Organization Charting

Screenshots & Examples