|
|
@ -0,0 +1,76 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<title>Voting Results</title> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> |
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div id="canvas-holder" style="width:40%"> |
|
|
|
<canvas id="voteResults"></canvas> |
|
|
|
</div> |
|
|
|
<br> |
|
|
|
<script> |
|
|
|
var ctx = document.getElementById('voteResults').getContext('2d'); |
|
|
|
var config = { |
|
|
|
type: 'pie', |
|
|
|
data: { |
|
|
|
datasets: [{ |
|
|
|
data: [ |
|
|
|
], |
|
|
|
backgroundColor: [ |
|
|
|
], |
|
|
|
label: '' |
|
|
|
}], |
|
|
|
labels: [] |
|
|
|
}, |
|
|
|
options: { |
|
|
|
responsive: true |
|
|
|
} |
|
|
|
}; |
|
|
|
window.myPie = new Chart(ctx, config); |
|
|
|
|
|
|
|
function getRandomColor() { |
|
|
|
var letters = '0123456789ABCDEF'; |
|
|
|
var color = '#'; |
|
|
|
for (var i = 0; i < 6; i++) { |
|
|
|
color += letters[Math.floor(Math.random() * 16)]; |
|
|
|
} |
|
|
|
return color; |
|
|
|
} |
|
|
|
|
|
|
|
$.get("https://127.0.0.1:5000/votings", function(data, status){ |
|
|
|
if (status == "success") { |
|
|
|
data.forEach(function(element) { |
|
|
|
var a = document.createElement('a'); |
|
|
|
var linkText = document.createTextNode(element["name"]); |
|
|
|
a.appendChild(linkText); |
|
|
|
a.title = element["name"]; |
|
|
|
a.href = "javascript:graph(" + element["id"] + ");"; |
|
|
|
document.body.appendChild(a); |
|
|
|
document.body.appendChild(document.createElement("br")); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
function graph(id) { |
|
|
|
$.get("https://127.0.0.1:5000/votings/" + id, function(data, status){ |
|
|
|
if (status == "success") { |
|
|
|
config["data"]["datasets"][0]["label"] = data["name"] |
|
|
|
config["data"]["datasets"][0]["data"] = [] |
|
|
|
config["data"]["datasets"][0]["backgroundColor"] = [] |
|
|
|
config["data"]["labels"] = [] |
|
|
|
for (var key in data["votes"]) { |
|
|
|
config["data"]["datasets"][0]["data"].push(data["votes"][key]["votes"]); |
|
|
|
config["data"]["datasets"][0]["backgroundColor"].push(getRandomColor()); |
|
|
|
config["data"]["labels"].push(data["votes"][key]["name"]); |
|
|
|
} |
|
|
|
|
|
|
|
window.myPie.update(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |