From 8c42614520438e1e5cbf79e158a41745387ae9f6 Mon Sep 17 00:00:00 2001 From: Alexander Baumann <49756364+xystemat1c@users.noreply.github.com> Date: Tue, 7 May 2019 18:06:34 +0200 Subject: [PATCH] Implementing JSON data import --- .gitignore | 3 +- .../webapp/preview/data/flop_articles.json | 26 +++++ src/main/webapp/preview/data/overview.json | 26 +++++ .../webapp/preview/data/shoping_times.json | 18 +++ .../webapp/preview/data/sold_articles.json | 12 ++ .../webapp/preview/data/top_articles.json | 30 +++++ src/main/webapp/preview/js/flop_articles.js | 99 ++++++++-------- src/main/webapp/preview/js/overview.js | 106 +++++++++--------- src/main/webapp/preview/js/shoping_times.js | 104 ++++++++--------- src/main/webapp/preview/js/sold_articles.js | 77 ++++++------- src/main/webapp/preview/js/top_articles.js | 99 ++++++++-------- 11 files changed, 347 insertions(+), 253 deletions(-) create mode 100644 src/main/webapp/preview/data/flop_articles.json create mode 100644 src/main/webapp/preview/data/overview.json create mode 100644 src/main/webapp/preview/data/shoping_times.json create mode 100644 src/main/webapp/preview/data/sold_articles.json create mode 100644 src/main/webapp/preview/data/top_articles.json diff --git a/.gitignore b/.gitignore index f85356d..3398c73 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ *.iml .idea -.project \ No newline at end of file +.project +.vscode \ No newline at end of file diff --git a/src/main/webapp/preview/data/flop_articles.json b/src/main/webapp/preview/data/flop_articles.json new file mode 100644 index 0000000..b0aeaf9 --- /dev/null +++ b/src/main/webapp/preview/data/flop_articles.json @@ -0,0 +1,26 @@ +{ + "labels": [ + "Insgesamt", + "Gruppe 1", + "Gruppe 2", + "Gruppe 3" + ], + "data1": [ + 50, + 10, + 20, + 30 + ], + "data2": [ + 30, + 5, + 20, + 5 + ], + "data3": [ + 80, + 20, + 30, + 30 + ] +} \ No newline at end of file diff --git a/src/main/webapp/preview/data/overview.json b/src/main/webapp/preview/data/overview.json new file mode 100644 index 0000000..3f3c8db --- /dev/null +++ b/src/main/webapp/preview/data/overview.json @@ -0,0 +1,26 @@ +{ + "labels": [ + "1 Jan", + "2 Jan", + "3 Jan", + "4 Jan", + "5 Jan", + "6 Jan" + ], + "data1": [ + 200, + 150, + 190, + 99, + 142, + 222 + ], + "data2": [ + 434, + 300, + 324, + 198, + 349, + 353 + ] + } \ No newline at end of file diff --git a/src/main/webapp/preview/data/shoping_times.json b/src/main/webapp/preview/data/shoping_times.json new file mode 100644 index 0000000..4b072f3 --- /dev/null +++ b/src/main/webapp/preview/data/shoping_times.json @@ -0,0 +1,18 @@ +{ + "labels": [ + "8-9", + "9-10", + "10-11", + "11-12", + "12-13", + "13-14" + ], + "data1": [ + 12, + 19, + 3, + 5, + 2, + 3 + ] +} \ No newline at end of file diff --git a/src/main/webapp/preview/data/sold_articles.json b/src/main/webapp/preview/data/sold_articles.json new file mode 100644 index 0000000..d283062 --- /dev/null +++ b/src/main/webapp/preview/data/sold_articles.json @@ -0,0 +1,12 @@ +{ + "labels": [ + "Gruppe 1", + "Gruppe 2", + "Gruppe 3" + ], + "data1": [ + 2055, + 816, + 953 + ] +} \ No newline at end of file diff --git a/src/main/webapp/preview/data/top_articles.json b/src/main/webapp/preview/data/top_articles.json new file mode 100644 index 0000000..78c9e67 --- /dev/null +++ b/src/main/webapp/preview/data/top_articles.json @@ -0,0 +1,30 @@ +{ + "labels": [ + "Insgesamt", + "Gruppe 1", + "Gruppe 2", + "Gruppe 3" + ], + "label1": "Gartengeräte", + "data1": [ + 150, + 50, + 50, + 50 + ], + "label2": "Eisenwaren", + "data2": [ + 120, + 10, + 80, + 30 + ], + "label3": "Baumaterialien", + "data3": [ + 200, + 102, + 53, + 45 + ] + +} \ No newline at end of file diff --git a/src/main/webapp/preview/js/flop_articles.js b/src/main/webapp/preview/js/flop_articles.js index d54d92e..b9bc712 100644 --- a/src/main/webapp/preview/js/flop_articles.js +++ b/src/main/webapp/preview/js/flop_articles.js @@ -1,58 +1,47 @@ -var ctx = document.getElementById("flop_articles_chart"); -var flop_articles_chart = new Chart(ctx, { - type: 'horizontalBar', - data: { - labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',], - datasets: [{ - label: 'Holz', - backgroundColor: 'rgba(244, 177, 131, 1)', - stack: 'Stack 0', - data: [ - 50, - 10, - 20, - 30 - ] - }, { - label: 'Eisenwaren', - backgroundColor: 'rgba(255, 217, 102, 1)', - stack: 'Stack 1', - data: [ - 30, - 5, - 20, - 5 - ] - }, { - label: 'Baumaterialien', - backgroundColor: 'rgba(196, 209, 142, 1)', - stack: 'Stack 2', - data: [ - 80, - 20, - 30, - 30 - ] - }] - }, - options: { - responsive: true, - title: { - display: false, - text: 'Flop Artikel' - }, - legend: { - position: 'bottom', - }, - scales: { - yAxes: [{ - gridLines: { - display: false - }, - ticks: { - beginAtZero: true - } +$.ajax({ + url: 'data/flop_articles.json', + dataType: 'json' +}).done(function (results) { + new Chart(document.getElementById("flop_articles_chart"), { + type: 'horizontalBar', + data: { + labels: results.labels, + datasets: [{ + label: 'Holz', + backgroundColor: 'rgba(244, 177, 131, 1)', + stack: 'Stack 0', + data: results.data1 + }, { + label: 'Eisenwaren', + backgroundColor: 'rgba(255, 217, 102, 1)', + stack: 'Stack 1', + data: results.data2 + }, { + label: 'Baumaterialien', + backgroundColor: 'rgba(196, 209, 142, 1)', + stack: 'Stack 2', + data: results.data3 }] + }, + options: { + responsive: true, + title: { + display: false, + text: 'Flop Artikel' + }, + legend: { + position: 'bottom', + }, + scales: { + yAxes: [{ + gridLines: { + display: false + }, + ticks: { + beginAtZero: true + } + }] + } } - } + }); }); \ No newline at end of file diff --git a/src/main/webapp/preview/js/overview.js b/src/main/webapp/preview/js/overview.js index c372936..9f2c58a 100644 --- a/src/main/webapp/preview/js/overview.js +++ b/src/main/webapp/preview/js/overview.js @@ -1,54 +1,58 @@ -var ctx = document.getElementById("overview_chart"); -var overview_chart = new Chart(ctx, { - type: 'line', - data: { - labels: ["1 Jan", "2 Jan", "3 Jan", "4 Jan", "5 Jan", "6 Jan"], - datasets: [{ - label: "Warenanzahl", - data: [200, 150, 190, 99, 142, 222], - fill: true, - backgroundColor: 'rgba(113, 114, 231, 0.7)', - lineTension: 0, - }, { - label: "Einnahmen in €", - data: [434, 300, 324, 198, 349, 353], - fill: true, - backgroundColor: 'rgba(104, 216, 154, 0.8)', - lineTension: 0, - }] - }, - options: { - responsive: true, - title: { - display: false, - text: 'Übersicht' - }, - legend: { - display: false - }, - tooltips: { - mode: 'index', - intersect: false, - }, - hover: { - mode: 'nearest', - intersect: true - }, - elements: { - point: { - radius: 0 - } - }, - scales: { - xAxes: [{ - display: true, - gridLines: { - display: false - } - }], - yAxes: [{ - display: true, +$.ajax({ + url: 'data/overview.json', + dataType: 'json' +}).done(function (results) { + new Chart(document.getElementById("overview_chart"), { + type: 'line', + data: { + labels: results.labels, + datasets: [{ + label: "Warenanzahl", + data: results.data1, + fill: true, + backgroundColor: 'rgba(113, 114, 231, 0.7)', + lineTension: 0, + }, { + label: "Einnahmen in €", + data: results.data2, + fill: true, + backgroundColor: 'rgba(104, 216, 154, 0.8)', + lineTension: 0, }] + }, + options: { + responsive: true, + title: { + display: false, + text: 'Übersicht' + }, + legend: { + display: false + }, + tooltips: { + mode: 'index', + intersect: false, + }, + hover: { + mode: 'nearest', + intersect: true + }, + elements: { + point: { + radius: 0 + } + }, + scales: { + xAxes: [{ + display: true, + gridLines: { + display: false + } + }], + yAxes: [{ + display: true, + }] + } } - } + }); }); \ No newline at end of file diff --git a/src/main/webapp/preview/js/shoping_times.js b/src/main/webapp/preview/js/shoping_times.js index 12d9cd3..2644b26 100644 --- a/src/main/webapp/preview/js/shoping_times.js +++ b/src/main/webapp/preview/js/shoping_times.js @@ -1,53 +1,57 @@ -var ctx = document.getElementById("shoping_times_chart"); -var shoping_times_chart = new Chart(ctx, { - type: 'bar', - data: { - labels: ['8-9', '9-10', '10-11', '11-12', '12-13', '13-14'], - datasets: [{ - label: 'Anzahl verkaufter Artikel', - data: [12, 19, 3, 5, 2, 3], - backgroundColor: [ - 'rgba(143, 170, 220, 0.9)', - 'rgba(255, 50, 1, 0.9)', - 'rgba(143, 170, 220, 0.9)', - 'rgba(143, 170, 220, 0.9)', - 'rgba(103, 215, 153, 0.9)', - 'rgba(143, 170, 220, 0.9)', - ], - borderColor: [ - 'rgba(143, 170, 220, 0.9)', - 'rgba(255, 50, 1, 1)', - 'rgba(143, 170, 220, 1)', - 'rgba(143, 170, 220, 1)', - 'rgba(103, 215, 153, 1)', - 'rgba(143, 170, 220, 1)', - ], - borderWidth: 1 - }] - }, - options: { - responsive: true, - title: { - display: false, - text: 'Einkaufszeiten' - }, - legend: { - display: false - }, - scales: { - yAxes: [{ - categoryPercentage: 1.0, - barPercentage: 0.5, - ticks: { - beginAtZero: true - } - }], - xAxes: [{ - gridLines: { - display: false - }, +$.ajax({ + url: 'data/shoping_times.json', + dataType: 'json' +}).done(function (results) { + new Chart(document.getElementById("shoping_times_chart"), { + type: 'bar', + data: { + labels: results.labels, + datasets: [{ + label: 'Anzahl verkaufter Artikel', + data: results.data1, + backgroundColor: [ + 'rgba(143, 170, 220, 0.9)', + 'rgba(255, 50, 1, 0.9)', + 'rgba(143, 170, 220, 0.9)', + 'rgba(143, 170, 220, 0.9)', + 'rgba(103, 215, 153, 0.9)', + 'rgba(143, 170, 220, 0.9)', + ], + borderColor: [ + 'rgba(143, 170, 220, 0.9)', + 'rgba(255, 50, 1, 1)', + 'rgba(143, 170, 220, 1)', + 'rgba(143, 170, 220, 1)', + 'rgba(103, 215, 153, 1)', + 'rgba(143, 170, 220, 1)', + ], + borderWidth: 1 }] + }, + options: { + responsive: true, + title: { + display: false, + text: 'Einkaufszeiten' + }, + legend: { + display: false + }, + scales: { + yAxes: [{ + categoryPercentage: 1.0, + barPercentage: 0.5, + ticks: { + beginAtZero: true + } + }], + xAxes: [{ + gridLines: { + display: false + }, + }] + } } - } -}); + }); +}); \ No newline at end of file diff --git a/src/main/webapp/preview/js/sold_articles.js b/src/main/webapp/preview/js/sold_articles.js index 9aa2a03..4b6f30b 100644 --- a/src/main/webapp/preview/js/sold_articles.js +++ b/src/main/webapp/preview/js/sold_articles.js @@ -1,43 +1,38 @@ -var ctx = document.getElementById("sold_articles_cake"); -var sold_articles_cake = new Chart(ctx, { - type: 'pie', - data: { - datasets: [{ - data: [ - 2055, - 816, - 953, - ], - backgroundColor: [ - 'rgba(237, 125, 49, 0.9)', - 'rgba(255, 192, 0, 0.9)', - 'rgba(112, 173, 71, 0.9)', - ], - label: 'Dataset 1' - }], - labels: [ - 'Gruppe 1', - 'Gruppe 2', - 'Gruppe 3', - - ] - }, - options: { - responsive: true, - title: { - display: false, - text: 'Verkaufte Artikel', - }, - tooltips: { - mode: 'index', - intersect: false, - }, - hover: { - mode: 'nearest', - intersect: true - }, - legend: { - position: 'bottom' +$.ajax({ + url: 'data/sold_articles.json', + dataType: 'json' +}).done(function (results) { + new Chart(document.getElementById("sold_articles_cake"), { + type: 'pie', + data: { + datasets: [{ + data: results.data1, + backgroundColor: [ + 'rgba(237, 125, 49, 0.9)', + 'rgba(255, 192, 0, 0.9)', + 'rgba(112, 173, 71, 0.9)', + ], + label: 'Dataset 1' + }], + labels: results.labels + }, + options: { + responsive: true, + title: { + display: false, + text: 'Verkaufte Artikel', + }, + tooltips: { + mode: 'index', + intersect: false, + }, + hover: { + mode: 'nearest', + intersect: true + }, + legend: { + position: 'bottom' + } } - } + }); }); \ No newline at end of file diff --git a/src/main/webapp/preview/js/top_articles.js b/src/main/webapp/preview/js/top_articles.js index 50f4d20..7c0a587 100644 --- a/src/main/webapp/preview/js/top_articles.js +++ b/src/main/webapp/preview/js/top_articles.js @@ -1,58 +1,47 @@ -var ctx = document.getElementById("top_articles_chart"); -var top_articles_chart = new Chart(ctx, { - type: 'horizontalBar', - data: { - labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',], - datasets: [{ - label: 'Gartengeräte', - backgroundColor: 'rgba(244, 177, 131, 1)', - stack: 'Stack 0', - data: [ - 150, - 50, - 50, - 50 - ] - }, { - label: 'Eisenwaren', - backgroundColor: 'rgba(255, 217, 102, 1)', - stack: 'Stack 1', - data: [ - 120, - 10, - 80, - 30 - ] - }, { - label: 'Baumaterialien', - backgroundColor: 'rgba(196, 209, 142, 1)', - stack: 'Stack 2', - data: [ - 200, - 102, - 53, - 45 - ] - }] - }, - options: { - responsive: true, - title: { - display: false, - text: 'Top Artikel' - }, - legend: { - position: 'bottom', - }, - scales: { - yAxes: [{ - gridLines: { - display: false - }, - ticks: { - beginAtZero: true - } +$.ajax({ + url: 'data/top_articles.json', + dataType: 'json' +}).done(function (results) { + new Chart(document.getElementById("top_articles_chart"), { + type: 'phorizontalBarie', + data: { + labels: results.labels, + datasets: [{ + label: results.label1, + backgroundColor: 'rgba(244, 177, 131, 1)', + stack: 'Stack 0', + data: results.data1 + }, { + label: results.label2, + backgroundColor: 'rgba(255, 217, 102, 1)', + stack: 'Stack 1', + data: results.data2 + }, { + label: results.label3, + backgroundColor: 'rgba(196, 209, 142, 1)', + stack: 'Stack 2', + data: results.data3 }] + }, + options: { + responsive: true, + title: { + display: false, + text: 'Top Artikel' + }, + legend: { + position: 'bottom', + }, + scales: { + yAxes: [{ + gridLines: { + display: false + }, + ticks: { + beginAtZero: true + } + }] + } } - } + }); }); \ No newline at end of file