TreeMap for ASP.NET WebForms
Color
Features > Color

There are two ways of adding colors to regions.

Complete the following steps to create a TreeMap and add colors using the MinColor and MaxColor properties.

In the Designer

  1. Select the TreeMap control and click the smart tag  to open the TreeMap Tasks Menu.
  2. Click Items. This opens the TreeMapItem Collection Editor.
  3. Click the Add button to add a region at level 0 in the TreeMap.
  4. Set the Label as Largest Countries and Value as 6570549.
  5. Click the ellipsis button (...) next to Items property to open the TreeMapItem Collection Editor again.
  6. Click the Add button two times to add sub-regions for continents at level 1.

    While setting the Value for sub-regions, remember that the sum of the Values of all the sub-regions should be equal to the Value of their parent region.
  7. Set the Label for Item 1 as Asia and set the Value as 29982466.

  8. Set the MaxColor to #6600CC, MaxColorValue to 29982466, MinColor to White and MinColorValue to 0.
  9. Set the Label for Item 2 as Africa and set the Value as 6588083.
  10. Set the MaxColor to #FF0066, MaxColorValue to 6588083, MinColor to White and MinColorValue to 0.
  11. Add three sub-regions for countries (at level 2) to each continent, using the TreeMapItem Collection Editor .
  12. Set the Label, Value and for the regions at level 2, as shown below:
    Asia
    Property Value
    Item 1 Label Russia
    Value 17098242
    Item 2 Label China
    Value 9596961
    Item 3 Label India
    Value 3287263
    Africa
    Item 1 Label Algeria
    Value 2381741
    Item 2 Label DRC
    Value 2344858
    Item 3 Label Sudan
    Value 1861484
  13. Click OK and close all the TreeMapItem Collection Editors.
  14. Press F5 to run the project.

In Source View

Add the following markup within the <c1:C1TreeMap></c1:C1TreeMap>tags, to add regions to the TreeMap control and set their color using the MinColor, MaxColor, MinColorValue and MaxColorValue properties.

Source View
Copy Code
   <Items>
    <c1:TreeMapItem  Label="Largest Countries"  Value="36570549" >
        <Items>
            <c1:TreeMapItem  Label="Asia" Value="29982466" MaxColor="#6600CC" MaxColorValue="29982466" MinColorValue="0" MinColor="White">
                <Items>
                    <c1:TreeMapItem  Label="Russia" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="17098242" >      
                    </c1:TreeMapItem>
                    <c1:TreeMapItem  Label="China" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="9596961">
                    </c1:TreeMapItem>
                    <c1:TreeMapItem  Label="India" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="3287263">
                    </c1:TreeMapItem>
                </Items>
            </c1:TreeMapItem>
            <c1:TreeMapItem  Label="Africa" Value="6588083" MaxColor="#FF0066" MaxColorValue="6588083" MinColorValue="0" MinColor="White">
                <Items>
                    <c1:TreeMapItem  Label="Algeria" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="2381741" >
                    </c1:TreeMapItem>
                    <c1:TreeMapItem  Label="DRC" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="2344858" >
                    </c1:TreeMapItem>
                    <c1:TreeMapItem  Label="Sudan" MaxColorValue="0" MidColorValue="0" MinColorValue="0" Value="1861484">
                    </c1:TreeMapItem>
                </Items>
            </c1:TreeMapItem>
        </Items>
    </c1:TreeMapItem>
   </Items>
</c1:C1TreeMap>

In Code

Add the following code to the Page_Load event, to add regions to the TreeMap control and set their color using the MinColor, MaxColor, MinColorValue and MaxColorValue properties.

To write code in C#

C#
Copy Code
// create and add regions on level 0
TreeMapItem largestcountries = new TreeMapItem();
largestcountries.Label = "Largest Countries";
largestcountries.Value = 36570549;
C1TreeMap1.Items.Add(largestcountries);

// create and add regions on level 1
TreeMapItem[] continents = new TreeMapItem[2];
for (int i = 0; i < 2; i++)
    continents[i] = new TreeMapItem();
continents[0].Label = "Asia";
continents[1].Label = "Africa";
continents[0].Value = 29982466;
continents[1].Value = 6588083;

// set the MinColor, MaxColor, MinColorValue and MaxColorValue properties
continents[0].MaxColor = System.Drawing.ColorTranslator.FromHtml("#6600CC");
continents[1].MaxColor = System.Drawing.ColorTranslator.FromHtml("#FF0066");
continents[0].MaxColorValue = 29982466;
continents[1].MaxColorValue = 6588083;
continents[0].MinColor = System.Drawing.Color.White;
continents[1].MinColor = System.Drawing.Color.White; 
continents[0].MinColorValue = 0;
continents[1].MinColorValue = 0;
for (int i = 0; i < 2; i++)
    C1TreeMap1.Items[0].Items.Add(continents[i]);

// create and add regions on level 2, continent 1
TreeMapItem[] countries1 = new TreeMapItem[3];
for (int i = 0; i < 3; i++)
    countries1[i] = new TreeMapItem();
countries1[0].Label = "Russia";
countries1[1].Label = "China";
countries1[2].Label = "India";
countries1[0].Value = 17098242;
countries1[1].Value = 9596961;
countries1[2].Value = 3287263;        
for (int i = 0; i < 3; i++)
    C1TreeMap1.Items[0].Items[0].Items.Add(countries1[i]);

// create and add regions on level 2, for continent 2
TreeMapItem[] countries2 = new TreeMapItem[3];
for (int i = 0; i < 3; i++)
    countries2[i] = new TreeMapItem();
countries2[0].Label = "Algeria";
countries2[1].Label = "DRC";
countries2[2].Label = "Sudan";
countries2[0].Value = 2381741;
countries2[1].Value = 2344858;
countries2[2].Value = 1861484;
for (int i = 0; i < 3; i++)
    C1TreeMap1.Items[0].Items[1].Items.Add(countries2[i]);

To write code in VB

VB
Copy Code
' create and add regions on level 0
Dim largestcountries As New TreeMapItem()
largestcountries.Label = "Largest Countries"
largestcountries.Value = 36570549
C1TreeMap1.Items.Add(largestcountries)

' create and add regions on level 1
Dim continents As TreeMapItem() = New TreeMapItem(1) {}
For i As Integer = 0 To 1
    continents(i) = New TreeMapItem()
Next
continents(0).Label = "Asia"
continents(1).Label = "Africa"
continents(0).Value = 29982466
continents(1).Value = 6588083

' set the MinColor, MaxColor, MinColorValue and MaxColorValue properties
continents(0).MaxColor = System.Drawing.ColorTranslator.FromHtml("#6600CC")
continents(1).MaxColor = System.Drawing.ColorTranslator.FromHtml("#FF0066")
continents(0).MaxColorValue = 29982466
continents(1).MaxColorValue = 6588083
continents(0).MinColor = System.Drawing.Color.White
continents(1).MinColor = System.Drawing.Color.White
continents(0).MinColorValue = 0
continents(1).MinColorValue = 0
For i As Integer = 0 To 1
    C1TreeMap1.Items(0).Items.Add(continents(i))
Next

' create and add regions on level 2, continent 1
Dim countries1 As TreeMapItem() = New TreeMapItem(2) {}
For i As Integer = 0 To 2
    countries1(i) = New TreeMapItem()
Next
countries1(0).Label = "Russia"
countries1(1).Label = "China"
countries1(2).Label = "India"
countries1(0).Value = 17098242
countries1(1).Value = 9596961
countries1(2).Value = 3287263
For i As Integer = 0 To 2
    C1TreeMap1.Items(0).Items(0).Items.Add(countries1(i))
Next

' create and add regions on level 2, for continent 2
Dim countries2 As TreeMapItem() = New TreeMapItem(2) {}
For i As Integer = 0 To 2
    countries2(i) = New TreeMapItem()
Next
countries2(0).Label = "Algeria"
countries2(1).Label = "DRC"
countries2(2).Label = "Sudan"
countries2(0).Value = 2381741
countries2(1).Value = 2344858
countries2(2).Value = 1861484
For i As Integer = 0 To 2
    C1TreeMap1.Items(0).Items(1).Items.Add(countries2(i))
Next

What You've Accomplished

When you run the project, notice that the colors are assigned to countries according to their value, based on the MinColor, MaxColor, MinColorValue and MaxColorValue entered in their parent regions.