Edit this page

Use Color Ranges

To set a color for an item so that all its siblings take a different shade of it as its own color, you have three options:

  • Use the underlying Kendo TreeMap widget and define the colors in its colors collection.
  • Add a field in your data source that contains the desired color for each item and point the DataColor property to it.
  • Create a Kendo Theme with the desired ranges (see Example 1). Make sure that the theme name matches the Skin name of the RadTreeMap.

Example 1: Create a Kendo Theme with custom color ranges.

<telerik:RadTreeMap Skin="Metro" RenderMode="Lightweight" runat="server" ID="TreeMap1" Width="1000px" AlgorithmType="Squarified">
</telerik:RadTreeMap>
<script>
    ; (function () {
        var kendo = window.kendo,
            dataviz = kendo.dataviz,
            deepExtend = kendo.deepExtend;

        var treeMapThemes = {};
        //theme name must be lowercase from the Skin property
        treeMapThemes["metro"] = {
            treeMap: {
                colors: [
                        ["#f89d26", "#7c5e33"],
                        ["#b8e54b", "#627b41"],
                        ["#52d5f6", "#397486"],
                        ["#ffd800", "#7f7623"],
                        ["#277db4", "#28516b"],
                        ["#01ae98", "#196560"],
                        ["#fffc00", "#7f8423"],
                        ["#f7742c", "#7b4e35"],
                        ["#9fcf2d", "#587235"],
                        ["#008bcb", "#195775"]
                ]
            }
        };

        deepExtend(dataviz.ui, {
            themes: treeMapThemes
        });
    })();
</script>
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TreeMap1.DataFieldID = "ID";
        TreeMap1.DataFieldParentID = "ParentID";
        TreeMap1.DataTextField = "Name";
        TreeMap1.DataValueField = "Value";
        TreeMap1.DataSource = GetData();
        TreeMap1.DataBind();
    }
}

public DataTable GetData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID");
    table.Columns.Add("ParentID");
    table.Columns.Add("Name");
    table.Columns.Add("Value");

    table.Rows.Add(new String[] { "1", null, "TOP 20 Highest-Paid Athletes", "1" });
    table.Rows.Add(new String[] { "2", "1", "Soccer", "290.5" });
    table.Rows.Add(new String[] { "3", "2", "Cristiano Ronaldo", "80" });
    table.Rows.Add(new String[] { "4", "2", "Lionel Messi", "64.7" });
    table.Rows.Add(new String[] { "5", "2", "Zlatan Ibrahimovic", "40.4" });
    table.Rows.Add(new String[] { "6", "2", " Gareth Bale", "36.4" });
    table.Rows.Add(new String[] { "7", "2", "Radamel Falcao", "35.4" });
    table.Rows.Add(new String[] { "8", "2", "Neymar", "33.6" });

    table.Rows.Add(new String[] { "9", "1", "Basketball", "202.3" });
    table.Rows.Add(new String[] { "10", "9", "LeBron James", "72.3" });
    table.Rows.Add(new String[] { "11", "9", "Kobe Bryant", "61.5" });
    table.Rows.Add(new String[] { "12", "9", "Derrick Rose", "36.6" });
    table.Rows.Add(new String[] { "13", "9", "Kevin Durant", "31.9" });

    table.Rows.Add(new String[] { "14", "1", "Tennis", "133.8" });
    table.Rows.Add(new String[] { "15", "14", "Roger Federer", "56.2" });
    table.Rows.Add(new String[] { "16", "14", "Rafael Nadal", "44.5" });
    table.Rows.Add(new String[] { "17", "14", "Novak Djokovic", "33.1" });

    table.Rows.Add(new String[] { "18", "1", "Boxing", "146.8" });
    table.Rows.Add(new String[] { "19", "18", "Floyd Mayweather", "105" });
    table.Rows.Add(new String[] { "20", "18", "Manny Pacquiao", "41.8" });

    table.Rows.Add(new String[] { "21", "1", "Football", "76.8" });
    table.Rows.Add(new String[] { "22", "21", "Matt Ryan", "43.8" });
    table.Rows.Add(new String[] { "23", "21", "Matthew Stafford", "33" });

    table.Rows.Add(new String[] { "24", "1", "Golf", "84.4" });
    table.Rows.Add(new String[] { "25", "24", "Tiger Woods", "31.2" });
    table.Rows.Add(new String[] { "26", "24", "Phil Mickelson", "53.2" });

    table.Rows.Add(new String[] { "27", "1", "Racing", "32" });
    table.Rows.Add(new String[] { "28", "27", "Lewis Hamilton", "32" });

    return table;
}
Public Function GetData() As DataTable
    Dim table As New DataTable()
    table.Columns.Add("ID")
    table.Columns.Add("ParentID")
    table.Columns.Add("Name")
    table.Columns.Add("Value")


    table.Rows.Add(New [String]() {"1", Nothing, "TOP 20 Highest-Paid Athletes", "1"})
    table.Rows.Add(New [String]() {"2", "1", "Soccer", "290.5"})
    table.Rows.Add(New [String]() {"3", "2", "Cristiano Ronaldo", "80"})
    table.Rows.Add(New [String]() {"4", "2", "Lionel Messi", "64.7"})
    table.Rows.Add(New [String]() {"5", "2", "Zlatan Ibrahimovic", "40.4"})
    table.Rows.Add(New [String]() {"6", "2", " Gareth Bale", "36.4"})
    table.Rows.Add(New [String]() {"7", "2", "Radamel Falcao", "35.4"})
    table.Rows.Add(New [String]() {"8", "2", "Neymar", "33.6"})

    table.Rows.Add(New [String]() {"9", "1", "Basketball", "202.3"})
    table.Rows.Add(New [String]() {"10", "9", "LeBron James", "72.3"})
    table.Rows.Add(New [String]() {"11", "9", "Kobe Bryant", "61.5"})
    table.Rows.Add(New [String]() {"12", "9", "Derrick Rose", "36.6"})
    table.Rows.Add(New [String]() {"13", "9", "Kevin Durant", "31.9"})

    table.Rows.Add(New [String]() {"14", "1", "Tennis", "133.8"})
    table.Rows.Add(New [String]() {"15", "14", "Roger Federer", "56.2"})
    table.Rows.Add(New [String]() {"16", "14", "Rafael Nadal", "44.5"})
    table.Rows.Add(New [String]() {"17", "14", "Novak Djokovic", "33.1"})

    table.Rows.Add(New [String]() {"18", "1", "Boxing", "146.8"})
    table.Rows.Add(New [String]() {"19", "18", "Floyd Mayweather", "105"})
    table.Rows.Add(New [String]() {"20", "18", "Manny Pacquiao", "41.8"})

    table.Rows.Add(New [String]() {"21", "1", "Football", "76.8"})
    table.Rows.Add(New [String]() {"22", "21", "Matt Ryan", "43.8"})
    table.Rows.Add(New [String]() {"23", "21", "Matthew Stafford", "33"})

    table.Rows.Add(New [String]() {"24", "1", "Golf", "84.4"})
    table.Rows.Add(New [String]() {"25", "24", "Tiger Woods", "31.2"})
    table.Rows.Add(New [String]() {"26", "24", "Phil Mickelson", "53.2"})

    table.Rows.Add(New [String]() {"27", "1", "Racing", "32"})
    table.Rows.Add(New [String]() {"28", "27", "Lewis Hamilton", "32"})

    Return table
End Function

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        TreeMap1.DataFieldID = "ID"
        TreeMap1.DataFieldParentID = "ParentID"
        TreeMap1.DataTextField = "Name"
        TreeMap1.DataValueField = "Value"
        TreeMap1.DataSource = GetData()
        TreeMap1.DataBind()
    End If

End Sub

See Also