document.addEventListener("DOMContentLoaded", function () {
    // Obtener los datos del script inline en la página
    const languageLabels = JSON.parse(document.getElementById("language-data").textContent);
    const languageTextCounts = JSON.parse(document.getElementById("text-counts").textContent);
    const languageFileCounts = JSON.parse(document.getElementById("file-counts").textContent);
    const languageMediaCounts = JSON.parse(document.getElementById("media-counts").textContent);

    const ctx = document.getElementById('languageTypeChart').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: languageLabels,
            datasets: [
                {
                    label: 'Text Pastes',
                    data: languageTextCounts,
                    backgroundColor: '#4E79A7',
                },
                {
                    label: 'File Pastes',
                    data: languageFileCounts,
                    backgroundColor: '#F28E2C',
                },
                {
                    label: 'Media Pastes',
                    data: languageMediaCounts,
                    backgroundColor: '#E15759',
                },
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                },
            },
        },
    });
});