DataBinding

TreeMap control supports Data Binding and it can be achieved using dataSource property.

The e-dataSource property accepts the collection values as input. For example, you can provide the list of objects as input. The following code illustrates you on how to bind a flat collection as datasource for TreeMap.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
        <head>
            <title>Essential Studio for AngularJS: TreeMap</title>
            <!--CSS and Script file References -->
        </head> 
        <body ng-controller="TreemapCtrl">
         <div id="treemapContainer" style="align-content:center;width: 800px; height: 400px;">
         <ej-treemap e-datasource=populationData e-colorValuePath="Growth" e-weightvaluepath="Population">
        </ej-treemap>
         </div>
          <script>
           var population_data = [
                       { Continent: "Asia", Region: "Southern Asia", Growth: 1.32, Population: 1749046000 },
                       { Continent: "Asia", Region: "Eastern Asia", Growth: 0.57, Population: 1620807000 },
                       { Continent: "Asia", Region: "South-Eastern Asia", Growth: 1.20, Population: 618793000 },
                       { Continent: "Asia", Region: "Western Asia", Growth: 1.98, Population: 245707000 },
                       { Continent: "Asia", Region: "Central Asia", Growth: 1.43, Population: 64370000 },
                       { Continent: "Europe", Region: "Europe", Growth: 0.10, Population: 742452000 },
                       { Continent: "America", Region: "South America", Growth: 1.06, Population: 406740000 },
                       { Continent: "America", Region: "Northern America", Growth: 0.85, Population: 355361000 },
                       { Continent: "America", Region: "Central America", Growth: 1.40, Population: 167387000 },
                       { Continent: "Africa", Region: "Eastern Africa", Growth: 2.89, Population: 373202000 },
                       { Continent: "Africa", Region: "Western Africa", Growth: 2.78, Population: 331255000 },
                       { Continent: "Africa", Region: "Northern Africa", Growth: 1.70, Population: 210002000 },
                       { Continent: "Africa", Region: "Middle Africa", Growth: 2.79, Population: 135750000 },
                       { Continent: "Africa", Region: "Southern Africa", Growth: 0.91, Population: 60425000 }
            ];
               angular.module('TreemapApp', ['ejangular'])
               .controller('TreemapCtrl', function ($scope) {
                        $scope.populationData=population_data;
                            });
        </script>
        </body>
    </html>