Creating Maps in Angular

  • The chart is created using FusionCharts’ core JavaScript charts library and its Angular charts plugin.
  • // injecting ng-fusioncharts module var mapApp = angular.module(“AngularMapApp”, [“ng-fusioncharts”]);
  • Published by Gagan Sikri on 2 March, 2016


@dev_dashboard: #Code #Snippet – Creating Maps in Angular – – #tutorial #javascript #angularjs #angular #angularcharts #angularmaps

// injecting ng-fusioncharts module

var mapApp = angular.module(“AngularMapApp”, [“ng-fusioncharts”]);

// controller for chart

mapApp.controller(“mapController”, function($scope) {

“chart”: {

“caption”: “Global Population Density”,

“captionFontBold”: “0”,

“captionFontSize”: “28”,

“captionPadding”: “20”,

“theme”: “carbon”,

“showLabels”: “1”,

“formatNumberScale”: “0”

“colorRange”: {

“minValue”: “0”,

“startLabel”: “Low”,

“endlabel”: “High”,

“code”: “#FF4411”,

“gradient”: “1”,

“color”: [{

“maxValue”: “25”,

“code”: “#FFDD44”,

“displayValue”: “Median”

“maxValue”: “100”,

“code”: “#6baa01”

“data”: [{

“id”: “NA”,

“value”: “22.1”,

“showLabel”: “1”,

“displayValue”: “Moderate”

“id”: “SA”,

“value”: “22.0”,

“showLabel”: “1”,

“displayValue”: “Moderate”

“id”: “AS”,

“value”: “95.0”,

“showLabel”: “1”,

“displayValue”: “Dense”

“id”: “EU”,

“value”: “72.5”,

“showLabel”: “1”,

“displayValue”: “Dense”

“id”: “AF”,

“value”: “33.7”,

“showLabel”: “1”,

“displayValue”: “Moderate”

“id”: “AU”,

“value”: “3.2”,

“showLabel”: “1”,

“displayValue”: “Sparse”

Creating Maps in Angular