MediaWiki

CharacterDistribution.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

Created page with "document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('lineChart'); if (!canvas) return; // Abbruch, wenn kein Canvas gefunden wurde const ctx = canvas.getContext('2d'); const data = { labels: ['Kemble (1885)', 'Schröder (1898)', 'Hirth (1920)', 'Trier (1936)', 'Harder (1938)', 'Kellerer (1938)', 'Busoni (1940)'], datasets: [ { label: 'Huck', data: [47.40,..."
 
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
console.log('CharacterDistribution.js läuft');
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
     const canvas = document.getElementById('lineChart');
     const canvas = document.getElementById('testChart');
     if (!canvas) return; // Abbruch, wenn kein Canvas gefunden wurde
     if (!canvas) return; // Abbruch, falls Canvas noch nicht existiert


     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');
     const data = {
     new Chart(ctx, {
        labels: ['Kemble (1885)', 'Schröder (1898)', 'Hirth (1920)', 'Trier (1936)', 'Harder (1938)', 'Kellerer (1938)', 'Busoni (1940)'],
        datasets: [
            {
                label: 'Huck',
                data: [47.40, 50.98, 72.22, 54.29, 93.10, 50.00, 54.10],
                backgroundColor: 'red',
                borderColor: 'red',
                borderWidth: 1
            },
            {
                label: 'Jim',
                data: [17.92, 29.41, 22.22, 28.57, 44.83, 18.18, 26.23],
                backgroundColor: 'blue',
                borderColor: 'blue',
                borderWidth: 1
            },
            {
                label: 'Pap Finn',
                data: [5.78, 7.84, 5.56, 5.71, 6.90, 9.09, 4.92],
                backgroundColor: 'green',
                borderColor: 'green',
                borderWidth: 1
            },
            {
                label: 'King/Duke',
                data: [13.29, 13.73, 16.67, 20.00, 17.24, 9.09, 16.39],
                backgroundColor: 'orange',
                borderColor: 'orange',
                borderWidth: 1
            },
            {
                label: 'Tom',
                data: [11.56, 7.84, 19.44, 11.43, 24.14, 9.09, 11.48],
                backgroundColor: 'black',
                borderColor: 'black',
                borderWidth: 1
            },
            {
                label: 'Others',
                data: [38.73, 29.41, 36.11, 31.43, 17.24, 31.82, 22.95],
                backgroundColor: 'pink',
                borderColor: 'pink',
                borderWidth: 1
            },
            {
                type: 'scatter',
                label: 'Total # of Illustrations',
                data: [173, 51, 36, 35, 29, 22, 61],
                borderColor: 'purple',
                borderWidth: 3,
                xAxisID: 'x2',
                pointStyle: 'cross',
                pointRadius: 8,
                pointHoverRadius: 10,
                showLine: false
            }
        ]
    };
 
    const config = {
         type: 'bar',
         type: 'bar',
         data: data,
         data: {
        options: {
             labels: ['A', 'B', 'C'],
             indexAxis: 'y',
             datasets: [{
            responsive: true,
                 label: 'Test',
            plugins: {
                 data: [1, 2, 3],
                legend: { display: true },
                 backgroundColor: 'red'
                tooltip: { mode: 'index', intersect: false }
            }]
            },
        },
            interaction: { mode: 'nearest', axis: 'y', intersect: false },
        options: {}
             scales: {
     });
                 y: {
                    title: { display: true, text: 'Illustrator (Year)' },
                    barThickness: 30
                },
                 x: {
                    title: { display: true, text: '% of Illustrations Featuring Character' },
                    min: 0,
                    max: 100,
                },
                 x2: {
                    position: 'bottom',
                    title: { display: true, text: 'Total # of Illustrations' },
                    min: 0,
                    max: 180,
                    grid: { drawOnChartArea: false }
                }
            }
        }
     };


     new Chart(ctx, config);
     console.log('Chart sollte jetzt angezeigt werden');
});
});

Latest revision as of 19:21, 31 August 2025

console.log('CharacterDistribution.js läuft');

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('testChart');
    if (!canvas) return;  // Abbruch, falls Canvas noch nicht existiert

    const ctx = canvas.getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: 'Test',
                data: [1, 2, 3],
                backgroundColor: 'red'
            }]
        },
        options: {}
    });

    console.log('Chart sollte jetzt angezeigt werden');
});
Retrieved from "https://illus.twainframe.org/index.php?title=MediaWiki:CharacterDistribution.js&oldid=1061"