Wijmo UI for the Web
Data Binding
Wijmo User Guide > Widgets > TreeMap > Features > Data Binding

The wijtreemap widget supports JSON data binding to load remote data using the OData service. For example, the script below displays data binding of different products and categories listed in the Northwind database.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
     require(["wijmo.wijtreemap", "wijmo.wijtooltip"], function () {
        $.support.cors = true;
        var dataCount = 0,
          treemapData = [];
        $(document).ready(function () {
     //set url of the data source
              $.ajax({
                 url: "http://services.odata.org/Northwind/Northwind.svc/Categories?$format=json&$expand=Products",
                 crossOrigin: true,
                 success: function (result) {
                   $.each(result.value, function (idx, r) {
                       var data = {
                           name: r.CategoryName,
                           count: 0,
                           items: []
                        };
                   $.each(r.Products, function (i, p) {
                       var count = p.UnitsInStock,
                           d = {
                             name: p.ProductName,
                             count: count
                               };
                             data.items[i] = d;
                             data.count += count;
                          });
                     treemapData.push(data);
                        });
                     createTreemap();
                    }
                });
            });
             function createTreemap() {
                 $("#treemap").wijtreemap({
    //set tooltip option to true
                     showTooltip: true,
    //set value to bind value
                     valueBinding: "count",
    //set value to bind label
                     labelBinding: "name",
    //set data source
                data: treemapData
                });
            }
        });
</script>
See Also

Reference