I am facing an issue with my HTML canvas. Inside each canvas, there are tally boxes that represent the number of votes for different candidates. The problem arises when the number of votes exceeds 100, as some of the tally boxes disappear from the canvas. They are all displayed horizontally. I have tried adding CSS with max-width: "100%", but it did not solve the issue. Can anyone suggest a solution to display all the tally boxes within the canvas? Your help is much appreciated. Thank you in advance.
Below is the code snippet. Special thanks to Shomz.
var tb = angular.module("tb", []);
tb.controller("tallyboxController", function($scope) {
'use strict';
$scope.label = {
table: {
cName: "Candidate's Name",
cVote: 'Vote',
cTB: 'Tally Boxes',
cNV: 'No of votes',
period: '.'
},
};
$scope.presidents = [{
no: '1',
name: 'Jeoanna Lingh',
votes: 1223,
},{
no: '2',
name: 'Jewel Miller',
votes: 1234,
},{
no: '3',
name: 'Shin Lee',
votes: 1001,
}];
$scope.candidates = [
$scope.presidents,
$scope.vicepresidents
];
});
var tb = angular.module('tb');
tb.directive('drawing', function() {
return {
restrict: 'A',
scope: {
candidate: '='
},
link: function(scope, element, attrs) {
var colors = ['Red', 'Green', 'Blue', 'Yellow','black'];
scope.$watch("candidate.votes", function(newValue, oldValue) {
console.log('rendering', newValue);
render();
});
function render() {
var votes = scope.candidate.votes;
var ctx = element[0].getContext('2d');
var remainder = 0;
var oneBox = 0;
// clear canvas (needed for subtracting votes)
// and is a good practice anyway
element[0].width = element[0].width;
if (votes > 4) {
if (remainder = votes % 5) {
oneBox = (votes - remainder) / 5;
}
else {
oneBox = votes / 5;
}
} else {
remainder = votes;
}
drawOneBox();
function drawOneBox() {
;
for (var i = 0; i < oneBox; i++) {
var color = colors[Math.floor(i/5)];
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
// recheck the color
color = colors[Math.floor(oneBox/5)];
if (remainder == 1) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 2) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 3) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 4) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(25 + i * 25, 25);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
};
}
render();
} // end
};
});canvas {
max-width: 100%;
height: auto;
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="tb">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="tallyboxController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>{{label.table.cName}}</td>
<td>{{label.table.cTB}}</td>
<td>{{label.table.cNV}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in candidates[0]">
<td>{{value.no}} {{label.table.period}} {{value.name}}</td>
<td>
<canvas width="1000" height="30" id="{{value.no}}" candidate="value" drawing></canvas>
</td>
<td>{{value.votes}}</td>
</tr>
</tbody
</table>
</div>
</body>
</html>