Flat/Tabular Data FlexDiagram

Data-bound diagrams that use flat or tabular data allow FlexDiagram to create hierarchical diagrams from database tables or spreadsheet data. Each column represents a hierarchy level, and FlexDiagram automatically interprets these relationships.

This method is useful for visualizing structured tabular data in a hierarchical and intuitive format.

Create Flat/Tabular Data FlexDiagram

Create a data table.

DataTable table = new DataTable();
table.Columns.Add("Field");
table.Columns.Add("Domain");
table.Columns.Add("Specialty");
table.Columns.Add("Skill");

Bind the table to the diagram.

diagram.DataSource = table;
diagram.Binding = "Field,Domain,Specialty,Skill";

Flat/Tabular FlexDiagram Sample

using C1.Diagram;
using C1.Win.Diagram;
using System.Data;

namespace FlexDiagramPoC
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeDiagram();
        }

        private void InitializeDiagram()
        {
            // Create FlexDiagram instance
            var diagram = new FlexDiagram();
            diagram.Dock = DockStyle.Fill;
            this.Controls.Add(diagram);

            // Configure data binding
            // Get data table
            var table = CreateSkillsTable();

            // Set diagram data source
            diagram.DataSource = table;

            // Specify names of columns
            // 1st level, 2nd level, 3rd level, Node text
            diagram.Binding = "Field,Domain,Specialty,Skill";
            diagram.Direction = DiagramDirection.LeftRight;
        }

        DataTable CreateSkillsTable()
        {
            DataTable skillsTable = new DataTable("SkillsHierarchy");

            // Define columns in hierarchical order
            skillsTable.Columns.Add("Field", typeof(string));
            skillsTable.Columns.Add("Domain", typeof(string));
            skillsTable.Columns.Add("Specialty", typeof(string));
            skillsTable.Columns.Add("Skill", typeof(string));

            // Add data rows
            skillsTable.Rows.Add("Field", "Domain", "Specialty", "Skill");
            skillsTable.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development");
            skillsTable.Rows.Add("Technology", "Data Science", "Artificial Intelligence", "Machine Learning");
            skillsTable.Rows.Add("Technology", "Database", "Query Performance", "SQL Optimization");
            skillsTable.Rows.Add("Technology", "Backend", "Programming Languages", "Python Programming");
            skillsTable.Rows.Add("Technology", "Infrastructure", "AWS Solutions", "Cloud Architecture");

            return skillsTable;
        }
    }
}