-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtreemap.html
160 lines (140 loc) · 5.95 KB
/
treemap.html
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-60405785-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="/data/treeMapData.json"></script>
<!-- jsHeader -->
<script type="text/javascript">
// jsDrawChart
function drawChartTreeMapIDe45b8a3645() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Child');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Jumlah');
data.addColumn('number', 'log');
data.addRows(TREE_DATA);
new google
.visualization
.TreeMap(document.getElementById('TreeMapIDe45b8a3645'))
.draw(
data,
{
"width": 1200,
"height": 600,
"showScale": true
}
);
}
// jsDisplayChart
(function () {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "treemap";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartTreeMapIDe45b8a3645);
})();
function displayChartTreeMapIDe45b8a3645() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(
function () {
var pkgCount = pkgs.length;
google.load(
"visualization",
"1",
{
packages: pkgs, callback: function () {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
}
}
);
}, 100);
}
// jsFooter
</script>
<!-- jsChart -->
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartTreeMapIDe45b8a3645"></script>
<link href="css/custom.css" rel="stylesheet">
<title>Interactive Treemap - Usulan/Tambahan oleh DPRD</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Pantau RAPBD</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Data RAPBD DKI</a></li>
<li><a href="/treemap.html">Visualisasi anggaran</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="page-header">
<h2>Interactive Treemap - Usulan/Tambahan oleh DPRD</h2>
<p>
Data yang dipakai adalah yang ada di versi DPRD namun tidak ada di versi Pemprov dan DPRD.Pagu = 0.
</p>
<p>
Pagu adalah pembulatan ke atas dari nilai anggaran yang diusulkan Pemprov.
</p>
<p>
Pagu = 0 bermakna Pemprov tidak mengusulkan mata anggaran tersebut.
</p>
<p>
Klik kiri untuk drill-down masuk, klik kanan untuk drill-up keluar/mundur
</p>
</div>
<!-- divChart -->
<div id="TreeMapIDe45b8a3645"
style="width: 1200; height: 600;">
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</div>
</body>
</html>