1 files changed, 84 insertions, 0 deletions
diff --git a/static/piechart.js b/static/piechart.js
new file mode 100644
index 0000000..9baab35
--- /dev/null
+++ b/static/piechart.js
@@ -0,0 +1,84 @@
+// Change background image depending on budget balance
+document.addEventListener('DOMContentLoaded', function() {
+    let budget = document.getElementById('budget').innerHTML.split('$').pop();
+    if (parseFloat(budget) <= 0) {
+        document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg');
+    } else {
+        document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg');
+    }
+});
+
+// https://www.chartjs.org/docs/latest/
+// https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html
+let context, labels, colors, data, source;
+//Pie chart settings
+context = document.getElementById('piechart').getContext('2d');
+labels = [
+    'Rent & Bills',
+    'Maintenance',
+    'Food',
+    'Family',
+    'Pets',
+    'Clothes',
+    'Hobbies & Entertainment',
+    'Investing',
+    'Other'
+];
+
+colors = [
+    '#f75a3a',
+    '#1288da',
+    '#ffc300',
+    '#ffe7b0',
+    '#f39ad9',
+    '#6dc9ff',
+    '#ffc31d',
+    '#71e748',
+    '#b10981'
+];
+
+// Getting the data from hidden HTML div
+data = [];
+source = document.getElementById('hidden_data').getElementsByTagName('p');
+for (let i = 0; i < source.length; i++) {
+    data.push(source[i].innerHTML);
+}
+
+
+// Pie chart
+let myPie = new Chart(context, {
+    type: 'pie',
+    data: {
+        labels: labels,
+        datasets: [{
+            data: data,
+            backgroundColor: colors
+        }]
+    },
+    options: {
+        plugins: {
+          datalabels: {
+              borderColor: '#000',
+              color: 'black',
+              align: 'start',
+              font: {
+                  weight: 'bold',
+                  size: '14'
+              },
+              formatter: (value) => {
+                  return '$ ' + value;
+              }
+          },
+          legend: {
+            position: 'right',
+            align: 'center'
+          },
+          title: {
+            display: false,
+            text: "Title"
+          }
+        },
+        responsive: true
+    },
+    plugins: [ChartDataLabels]
+});