I am using the amCharts library in my Web application in order to render all the charts. They are working fine, but I need to add a mapChart on the page. I am not as familiar with mapCharts as I am with other charts, as using it seems to require a different approach than the others.
Please look at the setup of my code and look at what may have gone wrong within my code.
The following code adds the library into the index file:
<script type="text/javascript" src="bower_components/ammap3/ammap/ammap.js">
</script>
<script type="text/javascript"
src="bower_components/ammap3/ammap/maps/js/worldLow.js"></script>
I wrote the controller like so:
.controller('MapChartCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.amChartOptions = {
type: 'map',
theme: 'blur',
zoomControl: { zoomControlEnabled: false, panControlEnabled: false
},
data: {
map: 'worldLow',
zoomLevel: 3.5,
zoomLongitude: 10,
zoomLatitude: 52,
areas: [
{ title: 'Austria', id: 'AT', color: '#62bbb2', customData: '1
244', groupId: '1'},
{ title: 'Ireland', id: 'IE', color: '#62bbb2', customData: '1
342', groupId: '1'},
{ title: 'Denmark', id: 'DK', color: '#62bbb2', customData: '1
973', groupId: '1'},
{ title: 'Finland', id: 'FI', color: '#62bbb2', customData: '1
573', groupId: '1'},
{ title: 'Sweden', id: 'SE', color: '#62bbb2', customData: '1
084', groupId: '1'},
{ title: 'Great Britain', id: 'GB', color: '#62bbb2',
customData: '1 452', groupId: '1'}
]
},
areasSettings: {
rollOverOutlineColor: "#62bbb2",
rollOverColor: "#62bbb2",
alpha: 0.8,
unlistedAreasAlpha: 0.2,
unlistedAreasColor: "#bfbfbf",
balloonText: '[[title]]: [[customData]] users'},
categoryField: "title",
legend: {
width: '100%',
marginRight: 27,
marginLeft: 27,
equalWidths: false,
backgroundAlpha: 0.3,
backgroundColor: "#bfbfbf",
borderColor: "#bfbfbf",
borderAlpha: 1,
top: 362,
left: 0,
horizontalGap: 10,
data: [
{
title: 'over 1 000 users',
color: '#62bbb2'
},
{
title: '500 - 1 000 users',
color: '#b9f2a1'
},
{
title: '100 - 500 users',
color: '#ed7878'
},
{
title: '0 - 100 users',
color: '#e1e1e1'
}
]
},
export: {
enabled: true
},
pathToImages: 'bower_components/amcharts/dist/amcharts/images/'
}}])
<div class="panel-heading">Map Chart</div>
<div ng-controller="MapChartCtrl" style="height: 400px; width: 100%;">
<am-chart id="MapChart" options="amChartOptions"></am-chart>
</div>
Controller:
.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
chart = AmCharts.makeChart("chartdiv", {
type: "map",
projection: "winkel3",
theme: "light",
imagesSettings: {
rollOverColor: "#089282",
rollOverScale: 3,
selectedScale: 3,
selectedColor: "#089282",
color: "#13564e"
},
areasSettings: {
unlistedAreasColor: "#15A892",
outlineThickness: 0.1
},
dataProvider: {
map: "worldLow",
images: [ {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Vienna",
latitude: 48.2092,
longitude: 16.3728
}, {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Minsk",
latitude: 53.9678,
longitude: 27.5766
}, {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Brussels",
latitude: 50.8371,
longitude: 4.3676
}, {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Sarajevo",
latitude: 43.8608,
longitude: 18.4214
}, {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Sofia",
latitude: 42.7105,
longitude: 23.3238
}, {
svgPath: targetSVG,
zoomLevel: 5,
scale: 0.5,
title: "Zagreb",
latitude: 45.8150,
longitude: 15.9785
}
]
},
export: {
enabled: true
},
pathToImages: 'bower_components/amcharts/dist/amcharts/images/'
});
};
initChart();
}
}
});
HTML:
<my-elem></my-elem>