From dd41bcc84bbe94ef7957b6c3fd6c1b458dc61a57 Mon Sep 17 00:00:00 2001 From: Bastian Dehn Date: Sun, 7 Jul 2024 11:04:52 +0200 Subject: [PATCH] add google line chart --- src/xmlviewer/viewer.css | 22 +++++++++++++--------- src/xmlviewer/viewer.html | 4 +++- src/xmlviewer/viewer.js | 32 +++++++++++++++++++++++++++++++- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/src/xmlviewer/viewer.css b/src/xmlviewer/viewer.css index 0f301ed..3f370c1 100644 --- a/src/xmlviewer/viewer.css +++ b/src/xmlviewer/viewer.css @@ -48,14 +48,9 @@ tr:last-child td:last-child { .green { background-color: lightgreen; } -@media only screen and (min-width: 62rem) { - .tables { - display: flex; - flex-direction: row; - gap: 1rem; - align-items: start; - justify-content: center; - } +#diag { + width: 100%; + height: 40rem; } @media only screen and (max-width: 40rem) { th { @@ -78,4 +73,13 @@ tr:last-child td:last-child { font-weight: bold; content: attr(data-cell) ": "; } -} \ No newline at end of file +} +@media only screen and (min-width: 62rem) { + .tables { + display: flex; + flex-direction: row; + gap: 1rem; + align-items: start; + justify-content: center; + } +} diff --git a/src/xmlviewer/viewer.html b/src/xmlviewer/viewer.html index 8f18458..421ec23 100644 --- a/src/xmlviewer/viewer.html +++ b/src/xmlviewer/viewer.html @@ -5,9 +5,10 @@ - + +

Zeitkonto-Datei: @@ -61,6 +62,7 @@

\ No newline at end of file diff --git a/src/xmlviewer/viewer.js b/src/xmlviewer/viewer.js index 2cfbd95..1cdc35b 100644 --- a/src/xmlviewer/viewer.js +++ b/src/xmlviewer/viewer.js @@ -121,6 +121,32 @@ function appendHeader(tableElement) { tableElement.append(trElement) } +function loadChart(chartData) { + google.charts.load('current',{packages:['corechart']}); + google.charts.setOnLoadCallback(() => { + const data = google.visualization.arrayToDataTable(chartData); + + const options = { + title: 'Verlauf der Salden', + hAxis: {title: 'Datum'}, + vAxis: {title: 'Saldo'}, + legend: 'none' + }; + + const diag = document.getElementById('diag'); + const chart = new google.visualization.LineChart(diag); + chart.draw(data, options); + }); +} + +function convertSaldoToHour(saldo) { + const numbers = saldo.split(":"); + let hours = Number(numbers[0]); + hours += Number(numbers[1]) / 60; + + return hours; +} + function loadFile() { const fileinput = document.getElementById("filepath"); const element = document.getElementById("content"); @@ -141,11 +167,15 @@ function loadFile() { appendHeader(tableElement) const count = rootNode.childElementCount; + const chartData = []; + chartData.push(["datum", "saldo"]); for (let i = 0; i < count; i++) { + chartData.push([rootNode.children[i].getAttribute("datum"), + convertSaldoToHour(rootNode.children[i].getAttribute("saldo"))]); appendRow(rootNode.children[i], tableElement); } - element.append(tableElement); + loadChart(chartData); }; filereader.readAsText(fileinput.files[0]); } \ No newline at end of file -- 2.39.5