ComponentOne TreeMap for ASP.NET WebForms
Features / Color
In This Topic
    Color
    In This Topic

    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.