Kendo UI treemap json binding

I have been trying to build a very simple treemap(no hierarchy) using KendoUI, by providing it some json data as a datasource. This should have been very straightforward and simple as it's a common use-case. However, I am having no luck with it, after spending hours on it.

I tried this :

<body>
<div id="treemap"></div> 
<script> 
var data = [
    {
    name: "foo123",
    value: 10
    },
    {
    name: "foo234",
    value: 20
    }
   ];
$("#treemap").kendoTreeMap({
dataSource: data,
valueField: "value",
textField: "name"
});
</script>
</body>

Any suggestions on what I may be missing?

Solution

As stated in the docs "TreeMap is a visualization for hierarchical":

TreeMapping is a visualization for hierarchical data which uses nested rectangles. Each rectangle's size and color is related to the structure of the data, allowing you to more easily identify trends and patterns

So try to add a "root" level that wraps your two elements:

<body>
    <div id="treemap"></div>
    <script>
        var data = [{
            name: "foo",
            value: 1,
            items: [{
                name: "foo123",
                value: 10
            },
            {
                name: "foo234",
                value: 20
            }]
        }];
        $("#treemap").kendoTreeMap({
            dataSource: data,
            valueField: "value",
            textField: "name"
        });
    </script>
</body>