diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index c8d9613131f31c2a3ef37ef73f5f9d8f855b05f6..ec64994fe447416f6145c3e3b8b0fb658f6b02cc 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -4,12 +4,12 @@
     <b-row class="justify-content-md-center">
       <b-col id="visualization" class="bg-light" cols="12" lg="8">
         <visualization 
-          src="http://puu.sh/D6W1v.csv"
+          v-bind:src="data"
           @click-handler="handler"
         />
       </b-col>
       <b-col cols="12" lg="4">
-        <simple-card-container :dataBubble="data_bubble" />
+        <simple-card-container :dataBubble="data" />
       </b-col>
     </b-row>
     <div id="comments-container">
@@ -32,41 +32,33 @@ export default {
   },
   data() {
     return {
-      data_bubble : [
-        {
-          judul : "anggaran X",
-          biaya : "1000.0000"
-        },
-        {
-          judul : "anggaran X",
-          biaya : "1000.0000"
-        },
-        {
-          judul : "anggaran X",
-          biaya : "1000.0000"
-        },
-        {
-          judul : "anggaran X",
-          biaya : "1000.0000"
-        },
-      ]
+      data : []
     }
   },
   methods: {
-    handler(id) {
-      if (id === '0') {
-        this.$router.push('/pendapatan')
-      } else if (id === '1') {
-        this.$router.push('/biaya-langsung')
-      } else if (id === '2') {
-        this.$router.push('/biaya-tidak-langsung')
-      } else if (id === '3') {
-        this.$router.push('/pembiayaan')
+    handler(idobj) {
+      let id = idobj.$oid
+      this.$router.push({ name: 'BiayaLangsungId', params: { id: id } })
+    },
+    getDataFromTop() {
+      let fetchData = {
+        method: 'POST',
+        body: JSON.stringify({ year: 2019 }),
+        headers: { "Content-Type": "application/json" }
       }
-    }
+
+      fetch(`${this.$store.state.baseUrl}/api/page/get-top`, fetchData)
+      .then(response => response.json())
+      .then(response => {
+        if(response.status === 200) {
+          this.data = response.subdata
+        }
+      })
+    },
   },
   created : function() {
     this.$store.commit('changed','Semua Anggaran')
+    this.getDataFromTop()
   }
 }
 </script>
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index 73da827ca2be2c22f8746fb2ab2f25492c6d6d45..a006dad4f6651ec227f61d6240d9d0c3707d3c7a 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,6 +1,7 @@
 <template>
     <b-row id="content-detail">
-        <simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
+        <simple-card v-for="data in dataBubble" :key="data.name" v-bind:jenisAnggaran="data.name" v-bind:totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+              ',00.-'"/>
     </b-row>
 </template>
 
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index 1daba41bb856f7a0672288082b6d051adbad96c5..60a0fc034257c3265aae0abe5360b4e0c3e2d697 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -4,7 +4,8 @@
       {{"Detail KEGIATAN"+ "(" + rows + ")" }}
     </h4>
     <b-row id="content-detail">
-        <simple-card v-for="data in dataBubble" :key="data._id.$oid" v-bind:jenisAnggaran="data.name" v-bind:totalAnggaran="data.value" />
+        <simple-card v-for="data in dataBubble" :key="data._id.$oid" v-bind:jenisAnggaran="data.name" v-bind:totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+              ',00.-'"" />
     </b-row>
   </div>
 </template>