Studium
/
Softwareprojektmanagement
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implementing JSON data import

This commit is contained in:
Alexander Baumann 2019-05-07 18:06:34 +02:00
parent b323b0ab45
commit 8c42614520
11 changed files with 347 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
*.iml *.iml
.idea .idea
.project .project
.vscode

26
src/main/webapp/preview/data/flop_articles.json Normal file
View File

@ -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
]
}

26
src/main/webapp/preview/data/overview.json Normal file
View File

@ -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
]
}

18
src/main/webapp/preview/data/shoping_times.json Normal file
View File

@ -0,0 +1,18 @@
{
"labels": [
"8-9",
"9-10",
"10-11",
"11-12",
"12-13",
"13-14"
],
"data1": [
12,
19,
3,
5,
2,
3
]
}

12
src/main/webapp/preview/data/sold_articles.json Normal file
View File

@ -0,0 +1,12 @@
{
"labels": [
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"data1": [
2055,
816,
953
]
}

30
src/main/webapp/preview/data/top_articles.json Normal file
View File

@ -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
]
}

99
src/main/webapp/preview/js/flop_articles.js
View File

@ -1,58 +1,47 @@
var ctx = document.getElementById("flop_articles_chart"); $.ajax({
var flop_articles_chart = new Chart(ctx, { url: 'data/flop_articles.json',
type: 'horizontalBar', dataType: 'json'
data: { }).done(function (results) {
labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',], new Chart(document.getElementById("flop_articles_chart"), {
datasets: [{ type: 'horizontalBar',
label: 'Holz', data: {
backgroundColor: 'rgba(244, 177, 131, 1)', labels: results.labels,
stack: 'Stack 0', datasets: [{
data: [ label: 'Holz',
50, backgroundColor: 'rgba(244, 177, 131, 1)',
10, stack: 'Stack 0',
20, data: results.data1
30 }, {
] label: 'Eisenwaren',
}, { backgroundColor: 'rgba(255, 217, 102, 1)',
label: 'Eisenwaren', stack: 'Stack 1',
backgroundColor: 'rgba(255, 217, 102, 1)', data: results.data2
stack: 'Stack 1', }, {
data: [ label: 'Baumaterialien',
30, backgroundColor: 'rgba(196, 209, 142, 1)',
5, stack: 'Stack 2',
20, data: results.data3
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
}
}] }]
},
options: {
responsive: true,
title: {
display: false,
text: 'Flop Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
} }
} });
}); });

106
src/main/webapp/preview/js/overview.js
View File

@ -1,54 +1,58 @@
var ctx = document.getElementById("overview_chart"); $.ajax({
var overview_chart = new Chart(ctx, { url: 'data/overview.json',
type: 'line', dataType: 'json'
data: { }).done(function (results) {
labels: ["1 Jan", "2 Jan", "3 Jan", "4 Jan", "5 Jan", "6 Jan"], new Chart(document.getElementById("overview_chart"), {
datasets: [{ type: 'line',
label: "Warenanzahl", data: {
data: [200, 150, 190, 99, 142, 222], labels: results.labels,
fill: true, datasets: [{
backgroundColor: 'rgba(113, 114, 231, 0.7)', label: "Warenanzahl",
lineTension: 0, data: results.data1,
}, { fill: true,
label: "Einnahmen in €", backgroundColor: 'rgba(113, 114, 231, 0.7)',
data: [434, 300, 324, 198, 349, 353], lineTension: 0,
fill: true, }, {
backgroundColor: 'rgba(104, 216, 154, 0.8)', label: "Einnahmen in €",
lineTension: 0, data: results.data2,
}] fill: true,
}, backgroundColor: 'rgba(104, 216, 154, 0.8)',
options: { lineTension: 0,
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,
}] }]
},
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,
}]
}
} }
} });
}); });

104
src/main/webapp/preview/js/shoping_times.js
View File

@ -1,53 +1,57 @@
var ctx = document.getElementById("shoping_times_chart"); $.ajax({
var shoping_times_chart = new Chart(ctx, { url: 'data/shoping_times.json',
type: 'bar', dataType: 'json'
data: { }).done(function (results) {
labels: ['8-9', '9-10', '10-11', '11-12', '12-13', '13-14'], new Chart(document.getElementById("shoping_times_chart"), {
datasets: [{ type: 'bar',
label: 'Anzahl verkaufter Artikel', data: {
data: [12, 19, 3, 5, 2, 3], labels: results.labels,
backgroundColor: [ datasets: [{
'rgba(143, 170, 220, 0.9)', label: 'Anzahl verkaufter Artikel',
'rgba(255, 50, 1, 0.9)', data: results.data1,
'rgba(143, 170, 220, 0.9)', backgroundColor: [
'rgba(143, 170, 220, 0.9)', 'rgba(143, 170, 220, 0.9)',
'rgba(103, 215, 153, 0.9)', 'rgba(255, 50, 1, 0.9)',
'rgba(143, 170, 220, 0.9)', 'rgba(143, 170, 220, 0.9)',
], 'rgba(143, 170, 220, 0.9)',
borderColor: [ 'rgba(103, 215, 153, 0.9)',
'rgba(143, 170, 220, 0.9)', 'rgba(143, 170, 220, 0.9)',
'rgba(255, 50, 1, 1)', ],
'rgba(143, 170, 220, 1)', borderColor: [
'rgba(143, 170, 220, 1)', 'rgba(143, 170, 220, 0.9)',
'rgba(103, 215, 153, 1)', 'rgba(255, 50, 1, 1)',
'rgba(143, 170, 220, 1)', 'rgba(143, 170, 220, 1)',
], 'rgba(143, 170, 220, 1)',
borderWidth: 1 'rgba(103, 215, 153, 1)',
}] 'rgba(143, 170, 220, 1)',
}, ],
options: { borderWidth: 1
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
},
}] }]
},
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
},
}]
}
} }
} });
}); });

77
src/main/webapp/preview/js/sold_articles.js
View File

@ -1,43 +1,38 @@
var ctx = document.getElementById("sold_articles_cake"); $.ajax({
var sold_articles_cake = new Chart(ctx, { url: 'data/sold_articles.json',
type: 'pie', dataType: 'json'
data: { }).done(function (results) {
datasets: [{ new Chart(document.getElementById("sold_articles_cake"), {
data: [ type: 'pie',
2055, data: {
816, datasets: [{
953, data: results.data1,
], backgroundColor: [
backgroundColor: [ 'rgba(237, 125, 49, 0.9)',
'rgba(237, 125, 49, 0.9)', 'rgba(255, 192, 0, 0.9)',
'rgba(255, 192, 0, 0.9)', 'rgba(112, 173, 71, 0.9)',
'rgba(112, 173, 71, 0.9)', ],
], label: 'Dataset 1'
label: 'Dataset 1' }],
}], labels: results.labels
labels: [ },
'Gruppe 1', options: {
'Gruppe 2', responsive: true,
'Gruppe 3', title: {
display: false,
] text: 'Verkaufte Artikel',
}, },
options: { tooltips: {
responsive: true, mode: 'index',
title: { intersect: false,
display: false, },
text: 'Verkaufte Artikel', hover: {
}, mode: 'nearest',
tooltips: { intersect: true
mode: 'index', },
intersect: false, legend: {
}, position: 'bottom'
hover: { }
mode: 'nearest',
intersect: true
},
legend: {
position: 'bottom'
} }
} });
}); });

99
src/main/webapp/preview/js/top_articles.js
View File

@ -1,58 +1,47 @@
var ctx = document.getElementById("top_articles_chart"); $.ajax({
var top_articles_chart = new Chart(ctx, { url: 'data/top_articles.json',
type: 'horizontalBar', dataType: 'json'
data: { }).done(function (results) {
labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',], new Chart(document.getElementById("top_articles_chart"), {
datasets: [{ type: 'phorizontalBarie',
label: 'Gartengeräte', data: {
backgroundColor: 'rgba(244, 177, 131, 1)', labels: results.labels,
stack: 'Stack 0', datasets: [{
data: [ label: results.label1,
150, backgroundColor: 'rgba(244, 177, 131, 1)',
50, stack: 'Stack 0',
50, data: results.data1
50 }, {
] label: results.label2,
}, { backgroundColor: 'rgba(255, 217, 102, 1)',
label: 'Eisenwaren', stack: 'Stack 1',
backgroundColor: 'rgba(255, 217, 102, 1)', data: results.data2
stack: 'Stack 1', }, {
data: [ label: results.label3,
120, backgroundColor: 'rgba(196, 209, 142, 1)',
10, stack: 'Stack 2',
80, data: results.data3
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
}
}] }]
},
options: {
responsive: true,
title: {
display: false,
text: 'Top Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
} }
} });
}); });