Wijmo UI for the Web
AngularJS and wijtreemap
Wijmo User Guide > AngularJS Directives > AngularJS and wijtreemap
Show All
Hide All

In this Angular getting started guide, you'll learn how to use the wijtreemap widget in an HTML project using HTML markup, jQuery script, and AngularJS directives.

For more complex samples that have the controller and model in separate files, see the AngularJS Directive Gallery on our web site.

  1. Add the following code and save the document with an .html extension to create a new HTML page in your favorite text editor.
  2. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn. Along with our usual references, we add two script references for Angular that must come after the jQuery references, so they are the last two lines:
    • For AngularJS itself.
    • For Wijmo's Angular javascript integration library.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmo Scripts -->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

<!-- Angular -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20161.90.min.js"></script>
  3. Within the <head> tags, below the references, add the following script to set the app to use Wijmo, and to create a simple controller with a $scope parameter to control data context.
    Script
    Copy Code 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.data = [{
                label: "North America",
                value: 18625,
                items: [{
                    label: "United States",
                    value: 16800
                },{
                    label: "Canada",
                    value: 1825
                }]
            }, {
                label: "Asia",
                value: 18934,
                items: [{
                    label: "China",
                    value: 9240
                },{
                    label: "Japan",
                    value: 4901
                },{
                    label: "India",
                    value: 1876
                },{
                    label: "South Korea",
                    value: 1304
                },{
                    label: "Indonesia",
                    value: 868
                },{
                    label: "Saudi Arabia",
                    value: 745
                }]
            }, {
                label: "Europe",
                value: 16685,
                items: [{
                    label: "Germany",
                    value: 3634
                },{
                    label: "France",
                    value: 2734
                },{
                    label: "United Kingdom",
                    value: 2522
                },{
                    label: "Russia",
                    value: 2096
                },{
                    label: "Italy",
                    value: 2071
                },{
                    label: "Spain",
                    value: 1358
                },{
                    label: "Turkey",
                    value: 820
                },{
                    label: "Netherlands",
                    value: 800
                },{
                    label: "Switzerland",
                    value: 650
                }]
            }, {
                label: "South America",
                value: 4554,
                items: [{
                    label: "Brazil",
                    value: 2245
                },{
                    label: "Mexico",
                    value: 1260
                },{
                    label: "Argentina",
                    value: 611
                },{
                    label: "Venezuela",
                    value: 438
                }]
            }, {
                label: "Australasia & Oceania",
                value: 1742,
                items: [{
                    label: "Australia",
                    value: 1560
                },{
                    label: "New Zealand",
                    value: 182
                }]
            }, {
                label: "Africa",
                value: 872,
                items: [{
                    label: "Nigeria",
                    value: 522
                },{
                    label: "South Africa",
                    value: 350
                }]
            }];
        $scope.labelFormatter= function () {
            return "Country: " + this.label + "<br/> GDP: " + this.value + " $BN";
        }
    }
</script>
  4. Add the following markup within the <body> tags to create the widgets. To see how this is done in jQuery without Angular, see Treemap-Quick Start.

    We use a <wij-treemap> directive to create the first widget, and set the following attributes

    • We set the input element's id attribute to identify it and call it in the for attribute of the corresponding label element.
    • We set the label-formatter option to format the label.
    • We set the type option to specify the type, squarified, to display the widget. 
    • We also set the show-label and show-title option value as true, to display label and title on the wijtreemap.
    Markup
    Copy Code 
    <wij-treemap id="treemap" label-formatter="labelFormatter" data="data" type="squarified" show-label="true" show-title="true" >
</wij-treemap>
  5. The widget appears like the following live widget.
    MISSING WIDGET TYPE: The "Live Widget" Widget Type could not be found. The "Live Widget" Widget Type may have been deleted since this Widget was created.
See Also
GettingStartedWithAngularJS

Widgets

TreeMap

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page