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

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
*.iml
.idea
.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");
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
}
}]
}
}
}
});
});

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

@ -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,
}]
}
}
}
});
});

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

@ -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
},
}]
}
}
}
});
});

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

@ -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'
}
}
}
});
});

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

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