+proper layout for Cluster Table
This commit is contained in:
parent
c087ed7706
commit
2f36e1a4d3
|
@ -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();
|
||||
|
|
|
@ -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-->
|
||||
|
|
|
@ -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>" + "ø" + "</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>");
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue