Spendenseite: neuer Graph

flamingo/content/spenden.html

@@ -58,7 +58,7 @@ title: Spenden
                 Der folgende Graph gibt dir eine Übersicht über die Finanzierung von Freifunk
                 Braunschweig über die letzen sechs Monate:<br />
                 <br >
-                <div id="graph" style="width: 100%; height: 300px;"></div>
+                <canvas id="graph" style="width: 100%; height: 300px;"></canvas>
                 Das aktuelle Guthaben des Freifunk Braunschweig beträgt: <span id="finanz_total" >?</span> EUR
             </div>
         </div>
@@ -87,6 +87,6 @@ title: Spenden
         </div>
     </div>
 </div>
-<script src="/js/dygraph-combined.js"></script>
+<script src="/js/Chart.min.js"></script>
 <script src="/js/finanz.js"></script>
 

flamingo/static/js/finanz.js

@@ -12,18 +12,45 @@ $(function () {
         const typeIds = types.map(function (typ) {
             return ans.types.findIndex(function (t) { return t.indexOf(typ) > -1; });
         });
-        const graphData = [];
-        for (let i = 0; i < 6; i++) {
-            graphData.push([i].concat(typeIds.map(function (typeId) {
-                return parseFloat(ans.months[i].typeTotals[typeId]);
-            })));
+        const income = [];
+        const expense = [];
+        const labels = [];
+        for (let i = 1; i <= 12; i++) {
+            labels.unshift(ans.months[i].yearmonth);
+            for (let j = 0; j < typeIds.length; j++) {
+                ((j%2) === 0 ? income : expense).unshift(Math.abs(parseFloat(ans.months[i].typeTotals[typeIds[j]])));
+            }
         }
-        console.log(graphData)
-        const labels = ['Monat'].concat(types);
-        new Dygraph(document.getElementById('graph'), graphData, {
-            labels: labels,
-            xlabel: labels[0],
-            ylabel: 'Euro'
+        const ctx = document.getElementById('graph').getContext('2d');
+        const chart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels,
+                datasets: [{
+                    backgroundColor: '#90ee90',
+                    label: 'Einnahmen',
+                    data: income
+                }, {
+                    backgroundColor: '#ff6363',
+                    label: 'Ausgaben',
+                    data: expense
+                }],
+            },
+            options: {
+                scales: {
+                    yAxes: [{
+                        scaleLabel: {
+                            display: true,
+                            labelString: 'EUR',
+                        },
+                    }],
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function (item) { return item.yLabel+'€'; },
+                    },
+                },
+            },
         });
     });
 });