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

BauDas GUI (ohne Warenkorbanalyse)

Browse Source
This commit is contained in:
edgar 2019-04-26 19:50:59 +02:00
parent 74be94a1f0
commit 2dc246a58a
7 changed files with 407 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

534
src/main/webapp/preview/index.html
View File

@ -4,128 +4,120 @@
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="../../../../../../OneDrive/Desktop/SPM%20GUI/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Script für die Diagramme-->
<script src="../../../../../../OneDrive/Desktop/SPM%20GUI/dist/Chart.bundle.js"></script>
</head>
<body class="blue-grey lighten-5">
<!--Navbar-->
<!--Die Navbar besteht aus 2 Navbars. Das habe ich so umgestzt, da das Suchfeld die komplette Navbar umfasst und sonst die Anderen Tabs verdeckt.
Um die Navbar zu fixieren wir ein äußere Wrapper benutzt.-->
<div class="navbar-fixed row">
<nav class="blue-grey lighten-3 white-text">
<!--Navbar Items-->
<div class="nav-wrapper col s1 m1 l6">
<!--Dieses Icon wird nur auf kleinen Bildschirmen(oder bei hohem Zoom) angezeigt, und erstzt die Items in der Navbar-->
<a href="#" data-target="sidebar" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="hide-on-med-and-down">
<li><a><i class="material-icons">person</i></a></li><!--Login-->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown_groups">Gruppen<i class="material-icons right">arrow_drop_down</i></a></li><!--Auswahl der Personengruppen-->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown_data_set">Datensatz<i class="material-icons right">arrow_drop_down</i></a></li><!--Auswahl der Datensätze-->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown_menu">Menü<i class="material-icons right">arrow_drop_down</i></a></li><!--Menü zum Navigieren auf der Page-->
<!--Navbar-->
<div class="navbar-fixed">
<nav class="nav-extended blue-grey lighten-3 white-text row">
<a href="#" class="brand-logo hide-on-small-and-down center">BauDas</a>
<!--Navbar Tabs-->
<div class="nav-content col 12 ">
<ul class="tabs tabs-transparent blue-grey lighten-3 white-text">
<li class="tab"><a class="active" href="#analysis"><i class="material-icons left">poll</i>Analyse</a></li>
<li class="tab"><a href="#marketing"><i class="material-icons left">public</i>Marketing</a></li>
</ul>
</div>
<!--Navbar Searchbar-->
<div class="nav-wrapper col s11 m11 l6">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
<!--Navbar Items-->
<div class="nav-wrapper col 2 right">
<ul class="right hide-on-med-and-down">
<li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons left">menu</i>Menü</a></li><!--Sidenav-->
<li><a><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
</ul>
<ul class="right">
<li><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a></li><!--Sidenav-->
<li><a href="#" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li><!--Logout-->
</ul>
</div>
</nav>
</div>
<br>
<!--Navbar Dropdown Contents-->
<!--Menü-->
<ul id="dropdown_menu" class="dropdown-content">
<li><a href="#test1">Analysen</a></li>
<li><a href="#test2">Marketing-Strategien</a></li>
<!--Sidenav Content-->
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img style="width: 100%" src="logoOrginal.gif">
</div>
<br>
<br>
</div></li>
<li><div class="divider"></div></li>
<li><div class="input-field container">
<label>Gruppenauswahl</label>
<br>
<select>
<option value="0">alle</option>
<option value="1">Gruppe 1</option>
<option value="2">Gruppe 2</option>
<option value="3">Gruppe 3</option>
</select>
</div></li>
<li><div class="input-field container">
<label>Datensatzauswahl</label>
<br>
<select>
<option value="0">aktuell</option>
<option value="1">Datensatz 1</option>
<option value="2">Datensatz 2</option>
<option value="3">Datensatz 3</option>
<option value="4">Datensatz 4</option>
<option value="5">Datensatz 5</option>
</select>
<br>
</div></li>
</ul>
<!--Datensätze-->
<ul id="dropdown_data_set" class="dropdown-content">
<li class="tab"><a href="#">aktuell</a></li>
<li class="divider"></li>
<li class="tab"><a href="#">1.Datensatz</a></li>
<li class="tab"><a href="#">2.Datensatz</a></li>
<li class="tab"><a href="#">3.Datensatz</a></li>
<li class="tab"><a href="#">4.Datensatz</a></li>
<li class="tab"><a href="#">5.Datensatz</a></li>
</ul>
<!--Gruppen-->
<ul id="dropdown_groups" class="dropdown-content">
<li class="tab"><a href="#">Gesamt</a></li>
<li class="tab"><a href="#">Gruppe 1</a></li>
<li class="tab"><a href="#">Gruppe 2</a></li>
<li class="tab"><a href="#">Gruppe 3</a></li>
</ul>
<!--Navbar Sidebar Contents-->
<ul class="sidenav" id="sidebar">
<li><a class="dropdown-trigger" data-target="dropdown_groups" href="!#">Gruppen<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown_data_set" href="!#">Datensatz<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown_menu" href="!#">Menü<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!--BauDasLogo-->
<div class="center">
<a href="" class="brand-logo center"><img src="../../../../../../OneDrive/Desktop/SPM%20GUI/logoOrginal.gif"></a>
</div>
<!--Diagramm-Cards-->
<!--Die verschiedenen Diagramme werdin in Cards augeteilt. Die Cards befinden sich je nach Katgorie in verschiedenen Containern-->
<!--Cards-->
<!--Analyse-Cards-->
<div id="test1" class="row container">
<div id="analysis" class="row container">
<!--Übersicht-->
<div class="col s12 m12">
<div class="card white">
<div id="overview" class="card white">
<div class="center">
<span class="card-title center">Übersicht</span>
</div>
<div class="card-conten">
<div>
<canvas id="Übersicht_Chart" width="1000" height="400"></canvas>
</div>
<div class="center">
<p>
Dropdownmenü
</p>
</div>
</div>
<div class="card-action">
<a href="#">Wochenübersicht</a>
<div class="card-action center">
<a href="#">Tagesübersicht</a>
<a href="#">Wochenübersicht</a>
</div>
<div class="card-content">
<div>
<canvas id="overview_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Einkaufszeiten-->
<div class="col s12 m6">
<div class="card white">
<div id="shoping_times" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title">Einkaufszeiten</span>
</div>
<div class="center">
<p>
Dropdownmenü
</p>
<div class="input-field col s12">
<select>
<option value="0">Montag</option>
<option value="1">Dienstag</option>
<option value="2">Mittwoch</option>
<option value="3">Donnerstag</option>
<option value="4">Freitag</option>
<option value="5">Samstag</option>
<option value="6">Sonntag</option>
</select>
<label>Wochentag</label>
</div>
</div>
<div>
<canvas id="Einkaufszeiten" width="1000" height="400"></canvas>
<canvas id="shoping_times_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
@ -133,62 +125,66 @@
<!--Verkaufte Artikel-->
<div class="col s12 m6">
<div class="card white">
<div id="sold_articles" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Verkaufte Artikel</span>
</div>
<div class="center">
<p>
Dropdownmenü
</p>
<div class="input-field col s12">
<select>
<option value="0">Artikel 1</option>
<option value="1">Artikel 2</option>
<option value="2">Artikel 3</option>
</select>
<label>Artikel</label>
</div>
</div>
<div>
<canvas id="Kuchendiagramm" width="1000" height="400"></canvas>
<canvas id="sold_articles_cake" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Top Artikel-->
<div class="col s12 m6">
<div class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Top Artikel</span>
</div>
<div>
<canvas id="TopArtikel" width="1000" height="400"></canvas>
</div>
<div id="top_articles" class="card white">
<div class="center">
<span class="card-title center">Top Artikel</span>
</div>
<div class="card-action">
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
</div>
<div class="card-content">
<div>
<canvas id="top_articles_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Flop Artikel-->
<div class="col s12 m6">
<div class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Flop Artikel</span>
</div>
<div>
<canvas id="FlopArtikel" width="1000" height="400"></canvas>
</div>
<div id="flop_articles" class="card white">
<div class="center">
<span class="card-title center">Flop Artikel</span>
</div>
<div class="card-action">
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
</div>
<div class="card-content">
<div>
<canvas id="flop_articles_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Warenkorbanlyse-->
<div class="col s12 m6">
<div id="shopping_card_analysis" class="col s12 m6">
<div class="card white">
<div class="card-content">
<div class="center">
@ -203,7 +199,7 @@
<!--Gruppenübersicht-->
<div class="col s12 m6">
<div class="card white">
<div id="group_overview" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Gruppenübersicht</span>
@ -217,9 +213,10 @@
</div>
<!--Marketing-Cards-->
<div id="test2" class="row container">
<div id="marketing" class="row container">
<div class="col s12 m6">
<div class="card white">
<div id="marketing_tip_1" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 1</span>
@ -231,10 +228,10 @@
</div>
</div>
<div class="col s12 m6">
<div class="card white">
<div id="marketing_tip_2" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 1</span>
<span class="card-title center">Marketingmaßnahme 2</span>
</div>
<div>
<p>Coming Soon</p>
@ -243,10 +240,10 @@
</div>
</div>
<div class="col s12 m6">
<div class="card white">
<div id="marketing_tip_3" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 1</span>
<span class="card-title center">Marketingmaßnahme 3</span>
</div>
<div>
<p>Coming Soon</p>
@ -255,10 +252,10 @@
</div>
</div>
<div class="col s12 m6">
<div class="card white">
<div id="marketing_tip_4" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 1</span>
<span class="card-title center">Marketingmaßnahme 4</span>
</div>
<div>
<p>Coming Soon</p>
@ -268,292 +265,21 @@
</div>
</div>
<!––Skriptbereich der einzelnen Statistiken, nach den Canvas-Objekten. Hier werden die einzelnen Diagramme
konfiguriert, welche von der Chart.js berechnet und anschließend an Canvas übergeben werden sollen.––>
<!--Anfang Skriptbereich-->
<script>
var ctx = document.getElementById("Übersicht_Chart");
var Übersicht_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,
}]
}
}
});
</script>
<script>
var ctx = document.getElementById("Kuchendiagramm");
var Kuchendiagramm = 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'
}
}
});
</script>
<script>
var ctx = document.getElementById("Einkaufszeiten");
var Einkaufszeiten = 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
},
}]
}
}
});
</script>
<script>
var ctx = document.getElementById("TopArtikel");
var TopArtikel = 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
}
}]
}
}
});
</script>
<script>
var ctx = document.getElementById("FlopArtikel");
var FlopArtikel = 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
}
}]
}
}
});
</script>
<!--Script für Diagramme-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<script src="js/overview.js"></script>
<script src="js/shoping_times.js"></script>
<script src="js/sold_articles.js"></script>
<script src="js/top_articles.js"></script>
<script src="js/flop_articles.js"></script>
<!--Script für Materlialize-->
<script type="text/javascript" src="../../../../../../OneDrive/Desktop/SPM%20GUI/js/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize_components.js"></script>
<!–– Ende Skriptbereich ––>
<!--Ende Skriptbereich-->
</body>
</html>

58
src/main/webapp/preview/js/flop_articles.js Normal file
View File

@ -0,0 +1,58 @@
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
}
}]
}
}
});

11
src/main/webapp/preview/js/materialize_components.js Normal file
View File

@ -0,0 +1,11 @@
$(".dropdown-trigger").dropdown();
$(document).ready(function(){
$('.sidenav').sidenav();
});
$('.tabs').tabs();
$(document).ready(function(){
$('select').formSelect();
});
$(document).ready(function(){
$('.collapsible').collapsible();
});

54
src/main/webapp/preview/js/overview.js Normal file
View File

@ -0,0 +1,54 @@
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,
}]
}
}
});

53
src/main/webapp/preview/js/shoping_times.js Normal file
View File

@ -0,0 +1,53 @@
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
},
}]
}
}
});

43
src/main/webapp/preview/js/sold_articles.js Normal file
View File

@ -0,0 +1,43 @@
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'
}
}
});

58
src/main/webapp/preview/js/top_articles.js Normal file
View File

@ -0,0 +1,58 @@
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
}
}]
}
}
});