MediaWiki:CharacterDistribution.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

document.addEventListener('DOMContentLoaded', () => {
    // Nur auf /Wiki/chardist ausführen
    if (mw.config.get('wgPageName') !== 'https://illus.twainframe.org/Wiki/chardist') return;

    // Stelle sicher, dass der Platzhalter existiert
    const container = document.getElementById('chart-placeholder');
    if (!container) return;

    // Canvas erzeugen und einfügen
    const canvas = document.createElement('canvas');
    canvas.id = 'lineChart';
    container.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    // --- Chart-Daten ---
    const data = {
        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 
            }
        ]
    };

    // --- Chart-Config ---
    const config = {
        type: 'bar',
        data: data,
        options: {
            indexAxis: 'y',
            responsive: true,
            plugins: {
                legend: { display: true },
                tooltip: { mode: 'index', intersect: false }
            },
            interaction: { mode: 'nearest', axis: 'y', intersect: false },
            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);
});