Untitled
unknown
plain_text
a year ago
6.1 kB
6
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Voting System with Vertical Bar Chart</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } canvas { display: block; margin: 20px auto; border: 1px solid #ccc; } .option { margin-bottom: 10px; } .vote-button { background-color: #4CAF50; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 4px; } .vote-button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>Voting System with Vertical Bar Chart</h2> <div class="option" id="option1"> Option 1 <button class="vote-button" onclick="vote('Option 1')">Vote</button> <span id="votes1">0</span> votes </div> <div class="option" id="option2"> Option 2 <button class="vote-button" onclick="vote('Option 2')">Vote</button> <span id="votes2">0</span> votes </div> <div class="option" id="option3"> Option 3 <button class="vote-button" onclick="vote('Option 3')">Vote</button> <span id="votes3">0</span> votes </div> <div class="option" id="option4"> Option 4 <button class="vote-button" onclick="vote('Option 4')">Vote</button> <span id="votes4">0</span> votes </div> <canvas id="barChart" width="600" height="400"></canvas> </div> <script> // Data for the chart (option names and their corresponding votes) let data = [ { option: 'Option 1', votes: 0, color: '#4CAF50' }, { option: 'Option 2', votes: 0, color: '#2196F3' }, { option: 'Option 3', votes: 0, color: '#FF9800' }, { option: 'Option 4', votes: 0, color: '#9C27B0' } ]; // Canvas setup const canvas = document.getElementById('barChart'); const ctx = canvas.getContext('2d'); // Constants for chart dimensions and spacing const chartArea = { x: 80, y: 40, width: canvas.width - 100, height: canvas.height - 80 }; const barWidth = chartArea.width / data.length * 0.5; // Adjust width factor for spacing between bars // Function to draw the chart function drawChart() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw grid lines drawGrid(); // Draw bars and labels data.forEach((item, index) => { const x = chartArea.x + index * (barWidth * 2); // Adjust spacing between bars const barHeight = item.votes * 20; // Adjust multiplier for height scaling // Draw bar ctx.fillStyle = item.color; ctx.fillRect(x, chartArea.y + chartArea.height - barHeight, barWidth, barHeight); // Draw label ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.fillText(item.option, x + barWidth / 2, chartArea.y + chartArea.height + 20); // Draw value on top of the bar ctx.fillText(item.votes, x + barWidth / 2, chartArea.y + chartArea.height - barHeight - 10); }); // Draw axes drawAxes(); } // Function to draw grid lines function drawGrid() { ctx.strokeStyle = '#ccc'; ctx.lineWidth = 0.5; // Draw horizontal grid lines const yAxisStep = Math.ceil(Math.max(...data.map(item => item.votes)) / 5); // Adjust the divisor for grid spacing for (let i = 1; i <= 5; i++) { const y = chartArea.y + chartArea.height - (chartArea.height / 5) * i; ctx.beginPath(); ctx.moveTo(chartArea.x, y); ctx.lineTo(chartArea.x + chartArea.width, y); ctx.stroke(); ctx.closePath(); // Draw y-axis labels ctx.fillStyle = '#000'; ctx.textAlign = 'right'; ctx.fillText(yAxisStep * i, chartArea.x - 10, y + 5); } // Draw vertical grid lines data.forEach((item, index) => { const x = chartArea.x + index * (barWidth * 2); // Adjust spacing between bars ctx.beginPath(); ctx.moveTo(x, chartArea.y); ctx.lineTo(x, chartArea.y + chartArea.height); ctx.stroke(); ctx.closePath(); }); } // Function to draw axes function drawAxes() { // Draw x-axis ctx.beginPath(); ctx.moveTo(chartArea.x, chartArea.y + chartArea.height); ctx.lineTo(chartArea.x + chartArea.width, chartArea.y + chartArea.height); ctx.stroke(); ctx.closePath(); // Draw y-axis ctx.beginPath(); ctx.moveTo(chartArea.x, chartArea.y); ctx.lineTo(chartArea.x, chartArea.y + chartArea.height); ctx.stroke(); ctx.closePath(); // Axis labels ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.fillText('Options', chartArea.x + chartArea.width / 2, chartArea.y + chartArea.height + 40); ctx.save(); ctx.translate(30, chartArea.y + chartArea.height / 2); ctx.rotate(-Math.PI / 2); ctx.fillText('Votes', 0, 0); ctx.restore(); } // Function to handle voting function vote(optionName) { data.forEach(item => { if (item.option === optionName) { item.votes++; } }); drawChart(); updateVoteCounts(); } // Function to update displayed vote counts function updateVoteCounts() { data.forEach((item, index) => { document.getElementById('votes' + (index + 1)).textContent = item.votes; }); } // Initial draw drawChart(); </script> </body> </html>
Editor is loading...
Leave a Comment