Untitled

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