From 1207f6a09d3eb37e4136b4c803e8e95bf95f6b0d Mon Sep 17 00:00:00 2001
From: Nathan Parikh <ndzynes@gmail.com>
Date: Tue, 12 Sep 2017 00:22:21 -0500
Subject: [PATCH] Added working doughnut chart to portfolio

---
 index.html       |  6 ++--
 js/app_common.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index deab92f..3447a96 100644
--- a/index.html
+++ b/index.html
@@ -89,9 +89,8 @@
 
       <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
 
-      <!-- manual entry of quantity -->
-      <!-- grab coin prices same as above -->
-      <!-- show current portfolio value -->
+      <canvas id="myChart" width="400" height="400"></canvas>
+
       <!-- show what % each coin is of portfolio -->
 
       <!-- Enter avg. purchase price for each coin -->
@@ -106,4 +105,5 @@
   </script>
   <script src="js/app_common.js"></script>
   <script src="js/html.sortable.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
 </html>
\ No newline at end of file
diff --git a/js/app_common.js b/js/app_common.js
index 022a6cd..caabdca 100644
--- a/js/app_common.js
+++ b/js/app_common.js
@@ -203,6 +203,52 @@ function updateData() {
             let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
             let pricesRAW     = data.RAW; // raw to get BTC instead of bitcoin symbol
             let portfolioSum  = 0;
+            // Chart labels
+            var chartLabels = [];
+            // Chart data
+            var chartData = [];
+            // Chart colors
+            var chartColors = [
+                '#F57C00',
+                '#AFB42B',
+                '#7B1FA2',
+                '#512DA8',
+                '#455A64',
+                '#1976D2',
+                '#0288D1',
+                '#0288D1',
+                '#D32F2F',
+                '#0097A7',
+                '#00796B',
+                '#388E3C',
+                '#689F38',
+                '#303F9F',
+                '#FBC02D',
+                '#FFA000',
+                '#E64A19',
+                '#C2185B',
+                '#fff'
+            ];
+            //randomize
+            function shuffle(array) {
+              var currentIndex = array.length, temporaryValue, randomIndex;
+
+              // While there remain elements to shuffle...
+              while (0 !== currentIndex) {
+
+                // Pick a remaining element...
+                randomIndex = Math.floor(Math.random() * currentIndex);
+                currentIndex -= 1;
+
+                // And swap it with the current element.
+                temporaryValue = array[currentIndex];
+                array[currentIndex] = array[randomIndex];
+                array[randomIndex] = temporaryValue;
+              }
+
+              return array;
+            }
+
             for (let key of Object.keys(pricesRAW)) {
               let coinDISPLAY = pricesDISPLAY[key];
                 let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
@@ -267,9 +313,36 @@ function updateData() {
                 quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                 portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
               }
-              
+
+              // Chart labels
+              chartLabels.push(key);
+              // Chart data
+              chartData.push(quantityTotal);
               
             } //for
+            var newChartLabels = chartLabels;
+           
+            // Chart
+            var ctx = document.getElementById("myChart");
+            var myChart = new Chart(ctx, {
+              type: 'doughnut',
+              data: {
+                  datasets: [{
+                      data: chartData,
+                      backgroundColor: chartColors,
+                      borderColor: '#000',
+                      borderWidth: 2
+                  }],
+
+                  labels: newChartLabels
+              },
+              options: {
+                  animation : false,
+                  legend : {
+                    position: 'bottom'
+                  }
+              }
+            });
 
           }); //then
         }