Stackoverflow Question http://softwarerecs.stackexchange.com/questions/21614/angularjs-charting-with-treemap-and-heatmaps-would-be-nice

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script>
  <script nonce="undefined" src='https://rawgit.com/zingchart/ZingChart-AngularJS/master/src/zingchart-angularjs.js'></script>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body ng-app="myApp">
  <div ng-controller="MainController">
    <zingchart id="chart-1" zc-json="myObj"></zingchart>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.loadModules('maps,maps-world-countries');

    var app = angular.module('myApp', ['zingchart-angularjs']);

    app.controller('MainController', function($scope) {
      $scope.myObj = {
        shapes: [{
          type: "zingchart.maps",
          options: {
            id: "map",
            scale: true,
            name: "world.countries",
            ignore: ["ATA"],
            style: {
              backgroundColor: "#ffffff",
              hoverState: {
                visible: false
              },
              borderColor: "#272822",
              label: {
                visible: false
              },
              items: {
                "USA": {
                  backgroundColor: "#4aa320",
                },
                "IND": {
                  backgroundColor: "#73f05f"
                },
                "CAN": {
                  backgroundColor: "#afffc8"
                },
                "MEX": {
                  backgroundColor: "#ededed"
                }
              }
            }
          }
        }]
      };
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script>
  <script src='https://rawgit.com/zingchart/ZingChart-AngularJS/master/src/zingchart-angularjs.js'></script>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="MainController">
    <zingchart id="chart-1" zc-json="myObj"></zingchart>
  </div>
</body>

</html>

zingchart.loadModules('maps,maps-world-countries');

var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {
  $scope.myObj = {
    shapes: [{
      type: "zingchart.maps",
      options: {
        id: "map",
        scale: true,
        name: "world.countries",
        ignore: ["ATA"],
        style: {
          backgroundColor: "#ffffff",
          hoverState: {
            visible: false
          },
          borderColor: "#272822",
          label: {
            visible: false
          },
          items: {
            "USA": {
              backgroundColor: "#4aa320",
            },
            "IND": {
              backgroundColor: "#73f05f"
            },
            "CAN": {
              backgroundColor: "#afffc8"
            },
            "MEX": {
              backgroundColor: "#ededed"
            }
          }
        }
      }
    }]
  };
});