ComponentOne FlexChart for WinForms
Quick Start
TreeMap > Quick Start

This quick start topic provides step-by-step instructions for adding a TreeMap chart to WinForms application, and show hierarchical data in it. In this topic, we consider an example where user wants to compare sales of books, music, videos, and gadgets (like computers and tablets) in XYZ city in a particular year.

The steps to display hierarchical data in TreeMap control are as follows:

The following image exhibits and compares sales of different varieties of books, music, videos, and gadgets (like computers and tablets) in XYZ city in a particular year.

tree map showing heirarchical data

Back to Top

You need to set the DataSource property, of TreeMap class, to point to the collection of objects that contain data points to be plotted on the chart. To generate data items and display them in TreeMap chart, set BindingName and Binding properties. Set the BindingName property to the string value that specifies the name of the data item to display as chart rectangles, and Binding property to the string value that specifies the name of property of chart items that contain chart values (numeric values that help calculate the size of tree nodes).   

To specify the level of hierarchical items to drill down and display in the chart set the MaxDepth property. Also, the display layout of the TreeMap is specified through its ChartType property. Additionally, color palette can be used to stylize the control and change its appearance.

Step 1: Add TreeMap to project

  1. Create a Windows Forms application in Visual Studio.
  2. Drag and drop TreeMap control from Toolbox to form.
    The following DLL gets added to your application:
    C1.Win.FlexChart.4.dll 

Back to Top

Step 2: Create a hierarchical data source

Switch to the code view and add the following code to generate sales data of Books, Music, Electronic items, Videos, and Computers and tablets.

Private rnd As New Random()
Private Function rand() As Integer
    Return rnd.[Next](10, 100)
End Function
Private Function GetData() As Object
    Dim data = New Object() {New With {
          .type = "Music",
          .items = New () {New With {
              .type = "Country",
              .items = New () {New With {
                  .type = "Classic Country",
                  .sales = rand()
            }}
        }, New With {
              .type = "Rock",
              .items = New () {New With {
                  .type = "Funk Rock",
                  .sales = rand()
            }}
        }, New With {
              .type = "Classical",
              .items = New () {New With {
                  .type = "Symphonies",
                  .sales = rand()
            }}
        }}
    }, New With {
          .type = "Books",
          .items = New () {New With {
              .type = "Arts & Photography",
              .items = New () {New With {
                  .type = "Architecture",
                  .sales = rand()
            }}
        }, New With {
              .type = "Children's Books",
              .items = New () {New With {
                  .type = "Beginning Readers",
                  .sales = rand()
            }}
        }, New With {
              .type = "History",
              .items = New () {New With {
                  .type = "Ancient",
                  .sales = rand()
            }}
        }, New With {
              .type = "Mystery",
              .items = New () {New With {
                  .type = "Thriller & Suspense",
                  .sales = rand()
            }}
        }, New With {
              .type = "Sci-Fi & Fantasy",
              .items = New () {New With {
                  .type = "Fantasy",
                  .sales = rand()
            }}
        }}
    }, New With {
          .type = "Electronics",
          .items = New () {New With {
              .type = "Wearable Technology",
              .items = New () {New With {
                  .type = "Activity Trackers",
                  .sales = rand()
            }}
        }, New With {
              .type = "Cell Phones",
              .items = New () {New With {
                  .type = "Accessories",
                  .sales = rand()
            }}
        }, New With {
              .type = "Headphones",
              .items = New () {New With {
                  .type = "Earbud headphones",
                  .sales = rand()
            }}
        }, New With {
              .type = "Camera",
              .items = New () {New With {
                  .type = "Digital Cameras",
                  .sales = rand()
            }}
        }}
    }, New With {
          .type = "Video",
          .items = New () {New With {
              .type = "Movie",
              .items = New () {New With {
                  .type = "Children & Family",
                  .sales = rand()
            }}
        }, New With {
              .type = "TV",
              .items = New () {New With {
                  .type = "Comedy",
                  .sales = rand()
            }}
        }}
    }}
    Return data
End Function

    Random rnd = new Random();
    int rand()
    {
        return rnd.Next(10, 100);
    }
    object GetData()
    {
        var data = new object[] { new {
        type = "Music",
        items = new [] { new {
            type = "Country",
            items= new [] { new {
                type= "Classic Country",
                sales = rand()
            }}
        }, new {
            type= "Rock",
            items= new [] { new {
                type= "Funk Rock",
                sales= rand()
             } }
        }, new {
            type= "Classical",
            items= new [] { new {
                type= "Symphonies",
                sales= rand()
                } }
  }}
}, new {
        type= "Books",
  items= new [] { new {
            type= "Arts & Photography",
    items= new [] { new {
                type= "Architecture",
      sales= rand()
    }}
  }, new {
            type= "Children's Books",
    items= new [] { new {
                type= "Beginning Readers",
      sales= rand()
    } }
  }, new {
            type= "History",
    items= new [] { new {
                type= "Ancient",
      sales= rand()
    } }
  }, new {
            type= "Mystery",
    items= new [] { new {
                type= "Thriller & Suspense",
      sales= rand()
             } }
  }, new {
            type= "Sci-Fi & Fantasy",
    items= new [] { new {
                type= "Fantasy",
      sales= rand()
    }}
  } }
}, new {
        type= "Electronics",
  items= new [] { new {
            type= "Wearable Technology",
    items= new [] { new {
                type= "Activity Trackers",
      sales= rand()
    }}
  }, new {
            type= "Cell Phones",
    items= new [] { new {
                type= "Accessories",
      sales= rand()
    } }
  }, new {
            type= "Headphones",
    items= new [] { new {
                type= "Earbud headphones",
      sales= rand()
    } }
  }, new {
            type= "Camera",
    items= new [] { new {
                type= "Digital Cameras",
      sales= rand()
             } }
  } }
}, new {
        type= "Video",
  items= new [] { new {
            type= "Movie",
    items= new [] { new {
                type= "Children & Family",
      sales= rand()
    } }
  }, new {
            type= "TV",
    items= new [] { new {
                type= "Comedy",
      sales= rand()
    } }
  } }
} };
        return data;
    }

Back to Top

Step 3: Bind the TreeMap to data source

  1. To set appropriate properties for displaying the tree map chart, define a method named SetupChart() and add the following code.
    TreeMap1.BeginUpdate()
TreeMap1.DataSource = GetData()
TreeMap1.Binding = "sales"
TreeMap1.BindingName = "type"
TreeMap1.ChildItemsPath = "items"
TreeMap1.MaxDepth = 2
TreeMap1.EndUpdate()

    treeMap1.BeginUpdate();
//DataSource property fetches random data 
//generated in GetData() method of the type system.Object 
treeMap1.DataSource = GetData();   
treeMap1.Binding = "sales";
treeMap1.BindingName = "type";
treeMap1.ChildItemsPath = "items";
treeMap1.MaxDepth = 2;
treeMap1.EndUpdate();
  2. Call the SetupChart() method in the Form class constructor below the InitializeComponent() method.

Back to Top

Step 4: Build and run the project

  1. Click Build | Build Solution to build the project.
  2. Press F5 to run the project.

Back to Top

See Also
TreeMap
Key Features
Elements
Layouts
Data Binding
Selection

SunBurst Chart

Sunburst Chart

Reference

TreeMap Class

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page