Using AngularJS with amCharts

Recently had an assignment to use amCharts.

Assignment requirements

  • Create a one page app using https://www.amcharts.com/javascript-maps
  • Table shows upwith date and state column.
  • A Chart of United States showing highlighted states
  • A box is present where I should be able to select a date and the map should highlight all the states with the date data before the selected date.
Import AngularJS and amCharts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
Create an angular app
var app = angular.module('StateApp', []);
Now lets bootstrap our app by adding the following to our body tag
<body ng-app="StateApp" class="container">
Now lets create a controller with our functions including a standard map of the United States from amCharts
    app.controller('mainController', function($scope, $window){

        $scope.states2 = [
            {
                id: AmCharts.maps.usaLow.svg.g.path[4].id,
                title: AmCharts.maps.usaLow.svg.g.path[4].title,
                d: AmCharts.maps.usaLow.svg.g.path[4].d,
                date: '1/10/80'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[44].id,
                title: AmCharts.maps.usaLow.svg.g.path[44].title,
                d: AmCharts.maps.usaLow.svg.g.path[44].d,
                date: '1/12/76'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[14].id,
                title: AmCharts.maps.usaLow.svg.g.path[14].title,
                d: AmCharts.maps.usaLow.svg.g.path[14].d,
                date: '1/3/95'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[34].id,
                title: AmCharts.maps.usaLow.svg.g.path[34].title,
                d: AmCharts.maps.usaLow.svg.g.path[34].d,
                date: '4/6/99'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[43].id,
                title: AmCharts.maps.usaLow.svg.g.path[43].title,
                d: AmCharts.maps.usaLow.svg.g.path[43].d,
                date: '5/7/00'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[9].id,
                title: AmCharts.maps.usaLow.svg.g.path[9].title,
                d: AmCharts.maps.usaLow.svg.g.path[9].d,
                date: '8/15/05'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[46].id,
                title: AmCharts.maps.usaLow.svg.g.path[46].title,
                d: AmCharts.maps.usaLow.svg.g.path[46].d,
                date: '9/29/10'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[37].id,
                title: AmCharts.maps.usaLow.svg.g.path[37].title,
                d: AmCharts.maps.usaLow.svg.g.path[37].d,
                date: '10/23/17'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[33].id,
                title: AmCharts.maps.usaLow.svg.g.path[33].title,
                d: AmCharts.maps.usaLow.svg.g.path[33].d,
                date: '3/25/24'
            },
            {
                id: AmCharts.maps.usaLow.svg.g.path[22].id,
                title: AmCharts.maps.usaLow.svg.g.path[22].title,
                d: AmCharts.maps.usaLow.svg.g.path[22].d,
                date: '2/10/01'
            },
        ]

      $scope.areas = function (date) {
        var stateId = []
        for(var i = 0; i < $scope.states2.length; i++){
          if(Date.parse($scope.states2[i].date) <= Date.parse(date) || date == null){
            stateId.push({
              id: `${$scope.states2[i].id}`
            })
          }
        }
        loadMap(stateId);
      };

      $scope.showAllAreas = function () {
        stateId = [];
        for(var i = 0; i < $scope.states2.length; i++){
          stateId.push({
            id: `${$scope.states2[i].id}`
          });
        }
        loadMap(stateId);
      };

      $scope.showAllStates = function () {
        stateId =[];
        var allStates = AmCharts.maps.usaLow.svg.g.path;
        for(var i = 0; i < allStates.length; i++){
          stateId.push({
            id: `${allStates[i].id}`
          })
        }
        loadMap(stateId);
      };

      loadMap = function (stateId) {
        map = AmCharts.makeChart( "chartdiv", {

          "type": "map",
            "theme": "dark",

          "panEventsEnabled": true,
          "dataProvider": {
            "map": "usaLow",
            "getAreasFromMap": false,
            "areas" : stateId

          },
          "areasSettings": {
            "autoZoom": false,
            "color": "#CDCDCD",
            "colorSolid": "#5EB7DE",
            "selectedColor": "#5EB7DE",
            "outlineColor": "#666666",
            "rollOverColor": "#88CAE7",
            "rollOverOutlineColor": "#FFFFFF",
            "selectable": false
          },
          "listeners": [ {
            "event": "clickMapObject",
            "method": function( event ) {

              // deselect the area by assigning all of the dataProvider as selected object
              const states = [];
              map.selectedObject = map.dataProvider;

              // toggle showAsSelected
              event.mapObject.showAsSelected = !event.mapObject.showAsSelected;

              // bring it to an appropriate color
              map.returnInitialColor( event.mapObject );
            }
          } ],
          "export": {
            "enabled": true
          }
        });      
      }
      $scope.areas()

    })

I created an array of states that I use to find the 10 states to start of the app. I also have functions that will reset the map and highlight all the states.

Final html mark up
<body ng-app="StateApp" class="container">

  <div id="info" class="row">
  <div class="col-md-12">
    <h1 align="center" style="margin-top: 30px;">Demo amChart | amMaps Demo App</h1>
  </div>
  <div id="chartdiv" class="col-md-9"></div>
    <div class="col-md-3" ng-controller="mainController" style="margin-top: 40px; padding-left: 40px;">
      <table class="table table-striped">
        <thead>
          <tr>
              <th class="col-md-4"> State </th>
              <th class="col-md-4"> Date </th>
              <th class="col-md-4"> Select </th>                
          </tr>                            
        </thead>
        <tbody>
          <tr ng-repeat="state in states2">
              <td class="col-md-4">{{state.title}}</td>
              <td class="col-md-4">{{state.date}}</td>
              <td class="col-md-4"><button ng-click="areas(state.date, $index)" class="btn btn-sm btn-primary">Select</button></td>              
          </tr>
        </tbody>
      </table>
    </div> 
    <div class="col-md-12">
        <button ng-controller="mainController" ng-click="showAllAreas()" class="btn btn-sm btn-danger pull-right">Reset Map</button>
        <button ng-controller="mainController" ng-click="showAllStates()" class="btn btn-sm btn-success pull-right">Select All States</button>
    </div>         
  </div>
</body>
1 Comments below

Back

Please log in to leave a comment

3fd9f8da5d9448e898b254839b4edaa1
I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site. We are providing AngularJs training in velachery. For more details: http://www.zerobugacademy.com/angularjs-training-in-chennai
Comment from: Bhuvana Bhuvana 7 months ago