|
|
- <!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>
|
