Merge branch 'main' of github.com:Kampus-Merdeka-Software-Engineering…

…/km-feb24-medan-12
Kampus-Merdeka-Software-Engineering · May 18, 2024 · fd21a7e · fd21a7e
2 parents eff24ab + 2f73624
commit fd21a7e
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 26 deletions.
diff --git a/dashboard.html b/dashboard.html
@@ -93,7 +93,7 @@ <h1>NYC Property Sales Dashboard</h1>
               <!--section form-->
               <div class = "user-interaction">
                 <!--FORM-->
-                <form id="filter-form" action="#", method="post">
+                <form action="#", method="post">
                   <div class="filter">
                     <!--Section untuk select "NEIGHBORHOOD"-->
                     <div class="filter-neighborhood">
@@ -162,28 +162,11 @@ <h1>NYC Property Sales Dashboard</h1>
         <div class="chart-area">
           <!--section untuk chart ringkasan yang berupa angka-->
           <div class="chart-mini">
-            <div class="chart-mini-1">
-              <h3>Total revenue</h3>
-              <p id="total-revenue-text"></p>
-            </div>
-            <div class="chart-mini-2">
-              <h3>Total Transaction</h3>
-              <p id="total-transaction"></p>
-            </div>
-            <div class="chart-mini-3">
-              <h3>
-                Average Sales
-              </h3>
-              <p id="average-sales"></p>
-            </div>
-            <div class="chart-mini-4">
-              <h3>Total Commercial Unit</h3>
-              <p id="total-commercial"></p>
-            </div>
-            <div class="chart-mini-5">
-              <h3>Total Residential Unit</h3>
-              <p id="total-residential"></p>
-            </div>           
+            <div class="chart-mini-1">Total revenue</div>
+            <div class="chart-mini-2">Total Transaction</div>
+            <div class="chart-mini-3">Average Sales</div>
+            <div class="chart-mini-4">Total Commercial Unit</div>
+            <div class="chart-mini-5">Total Residential Unit</div>
           </div>
           <!--section untuk chart berupa grafik-->
           <div class="chart">
@@ -192,7 +175,7 @@ <h3>Total Residential Unit</h3>
 
               </canvas>
             </div>
-            <div class="chart-2">monthly sales revenue
+            <div class="chart-2">
               <canvas id="mychart_2">
 
               </canvas>
@@ -252,6 +235,5 @@ <h2>Manhattan Sales Dashboard</h2>
       </main>    
     <!--file javascript-->
     <script src="script.js"></script>
-    <script src="script_2.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -277,4 +277,70 @@ function createChart5(arrPassed5, type) {
       },
     }
   })
-}
+}
+
+//MONTHLY AVERAGE REVENUE
+const chart2 = document.getElementById('mychart_2');
+
+fetch('File Json/Monthly_Average_Revenue.json')
+.then(function(response) {
+
+    if(response.ok == true){
+        return response.json();
+    }
+})
+.then(function(data){
+    console.log(data);
+    var arrYearMonth = [];
+    var arrAverageSalePrice = [];
+    data.forEach(element => {
+      arrYearMonth.push(element.YEAR_MONTH);
+      arrAverageSalePrice.push(element.AVERAGE_SALE_PRICE);
+    });
+    console.log(arrYearMonth);
+    console.log(arrAverageSalePrice);
+    var objChart = {
+      YEAR_MONTH : arrYearMonth,
+      AVERAGE_SALE_PRICE : arrAverageSalePrice,
+
+    };
+    console.log(objChart);
+    createChart7(objChart, 'line');
+})
+
+function createChart7(arrLine3, type){
+
+    new Chart(chart2, {
+        type: type,
+        data: {
+          labels: arrLine3.YEAR_MONTH,
+          datasets: [{
+            label: 'Monthly_Average_Revenue',
+            data: arrLine3.AVERAGE_SALE_PRICE,
+            fill: false,
+            borderColor: 'rgb(75, 192, 192)',
+          }]
+        },
+        options: {
+          plugins: {
+            title: {
+              display: true,
+              text: 'MONTHLY AVERAGE REVENUE'
+            }
+          },
+          scales: {
+            y: {
+            display: true,
+            ticks: {
+                beginAtZero: true,
+                max: 800000,
+                min: 500000
+            }
+
+              }
+            }
+          }
+        }
+      )
+    }
+