1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-globe"></i> {{ heading_title }}</h3>
</div>
<div class="panel-body">
<div id="vmap" style="width: 100%; height: 260px;"></div>
</div>
</div>
<link type="text/css" href="view/javascript/jquery/jqvmap/jqvmap.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="view/javascript/jquery/jqvmap/jquery.vmap.js"></script>
<script type="text/javascript" src="view/javascript/jquery/jqvmap/maps/jquery.vmap.world.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
$.ajax({
url: 'index.php?route=extension/dashboard/map/map&user_token={{ user_token }}',
dataType: 'json',
success: function(json) {
data = [];
for (i in json) {
data[i] = json[i]['total'];
}
$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#FFFFFF',
borderColor: '#FFFFFF',
color: '#9FD5F1',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: data,
normalizeFunction: 'polynomial',
onLabelShow: function(event, label, code) {
if (json[code]) {
label.html('<strong>' + label.text() + '</strong><br />' + '{{ text_order }} ' + json[code]['total'] + '<br />' + '{{ text_sale }} ' + json[code]['amount']);
}
}
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
//--></script>
|
