CopyBot/crypto-price-widget
1
0
Fork 0
mirror of https://github.com/nathanp/crypto-price-widget.git synced 2025-11-06 03:08:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added working doughnut chart to portfolio

Browse Source
This commit is contained in:
Nathan Parikh 2017-09-12 00:22:21 -05:00
parent 0f92fb17f5
commit 1207f6a09d
2 changed files with 77 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -89,9 +89,8 @@
<div id="portfolio-total-value">Total Value: <span class="value"></span></div> <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
<!-- manual entry of quantity --> <canvas id="myChart" width="400" height="400"></canvas>
<!-- grab coin prices same as above -->
<!-- show current portfolio value -->
<!-- show what % each coin is of portfolio --> <!-- show what % each coin is of portfolio -->
<!-- Enter avg. purchase price for each coin --> <!-- Enter avg. purchase price for each coin -->
@ -106,4 +105,5 @@
</script> </script>
<script src="js/app_common.js"></script> <script src="js/app_common.js"></script>
<script src="js/html.sortable.min.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> </html>

73
js/app_common.js
View File

@ -203,6 +203,52 @@ function updateData() {
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol
let portfolioSum = 0; 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)) { for (let key of Object.keys(pricesRAW)) {
let coinDISPLAY = pricesDISPLAY[key]; let coinDISPLAY = pricesDISPLAY[key];
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR; let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
@ -268,8 +314,35 @@ function updateData() {
portfolioTotalValue.innerHTML = portfolioSum.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 } //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 }); //then
} }