Implementing JSON data import
This commit is contained in:
Alexander Baumann
parent
b323b0ab45
commit
8c42614520
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
*.iml
|
||||
.idea
|
||||
.project
|
||||
.project
|
||||
.vscode
|
||||
26
src/main/webapp/preview/data/flop_articles.json
Normal file
26
src/main/webapp/preview/data/flop_articles.json
Normal 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
26
src/main/webapp/preview/data/overview.json
Normal 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
18
src/main/webapp/preview/data/shoping_times.json
Normal 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
12
src/main/webapp/preview/data/sold_articles.json
Normal 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
30
src/main/webapp/preview/data/top_articles.json
Normal 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
|
||||
]
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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,
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user