+proper layout for Cluster Table

This commit is contained in:
Julian Hinxlage 2019-05-27 17:33:56 +02:00
parent c087ed7706
commit 2f36e1a4d3
3 changed files with 48 additions and 33 deletions

View File

@ -1,12 +1,14 @@
<!--Anfang Skriptbereich-->
<!--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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"
integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<!--Script für Materlialize-->
<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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-palette@1.1.0/palette.min.js"></script>
<script>
M.AutoInit();

View File

@ -63,6 +63,21 @@
</div>
</div>
<!--Gruppenübersicht-->
<div class="col s12 m12">
<div id="group_overview" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Gruppenübersicht</span>
</div>
<div>
<table id="cluster_table">
</table>
</div>
</div>
</div>
</div>
<!--Warenkorbanlyse-->
<div id="shopping_card_analysis" class="col s12 m6">
<div class="card white">
@ -77,20 +92,7 @@
</div>
</div>
<!--Gruppenübersicht-->
<div class="col s12 m6">
<div id="group_overview" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Gruppenübersicht</span>
</div>
<div>
<tabel id="cluster_table" width="1000" height="400">
</tabel>
</div>
</div>
</div>
</div>
</div>
<!--Marketing-Cards-->

View File

@ -15,25 +15,36 @@ function updateClusters(id) {
function drawClusterTable(){
let row = $("<thead>");
row.append("<tr>");
row.append("<td>Alter</td>");
row.append("<td>Wohnort</td>");
row.append("<td>Einkaufstag</td>");
row.append("<td>Geschlecht</td>");
row.append("<td>Familienstand</td>");
row.append("<td>Einkaufsuhrzeit</td>");
row.append("<td></td>");
for (x in cluster_result){
if(x == 0){
row.append("<td>" + "&oslash;" + "</td>");
}else{
row.append("<td>" + x + "</td>");
}
}
row.append("</tr>");
row.append("</thead>");
row.append("</tbody>");
for(x in cluster_result){
row.append($("<tr>"));
row.append($("<td>" + cluster_result[x].Alter +"</td>"));
row.append($("<td>" + cluster_result[x].Wohnort +"</td>"));
row.append($("<td>" + cluster_result[x].Einkaufstag +"</td>"));
row.append($("<td>" + cluster_result[x].Geschlecht +"</td>"));
row.append($("<td>" + cluster_result[x].Familienstand +"</td>"));
row.append($("<td>" + cluster_result[x].Einkaufsuhrzeit +"</td>"));
row.append($("</tr>"));
}
appendClusterTable(row, "Alter");
appendClusterTable(row, "Wohnort");
appendClusterTable(row, "Einkaufstag");
appendClusterTable(row, "Geschlecht");
appendClusterTable(row, "Familienstand");
appendClusterTable(row, "Einkaufsuhrzeit");
row.append("</tbody>");
$("#cluster_table").append(row);
}
function appendClusterTable(row, attrib){
row.append("</tbody>");
row.append("<tr>");
row.append("<td>" + attrib + "</td>");
for (x in cluster_result){
row.append($("<td>" + cluster_result[x][attrib] +"</td>"));
}
row.append("</tr>");
}