MediaWiki:Common.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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
function getChartOptions() {
    return {
        scales: {
            r: {
                angleLines: { display: false },
                pointLabels: {
                    backdropColor: 'transparent',
                    color: 'black',
                    font: { weight: 'bold' }
                },
                ticks: {
                    backdropColor: 'transparent',
                    color: 'black'
                }
            }
        },
        plugins: {
            legend: { position: 'top' },
            title: {
                display: true,
                text: 'Power Pentagon',
                color: 'black',
                font: { weight: 'bold' }
            }
        },
        elements: {
            line: { borderColor: '#BB5D5D', borderWidth: 3 },
            point: { backgroundColor: '#BB5D5D' }
        },
        responsive: false,
        maintainAspectRatio: false
    };
}

function initializeCharts() {
    var chartDataElement = document.getElementById('chart-data');
    var chartContainer = document.getElementById('chart-container'); 
    if (chartDataElement && chartContainer && !chartDataElement.initialized) {
        var chartData = JSON.parse(chartDataElement.textContent);
        var canvas = chartContainer.querySelector('canvas');
        if (!canvas) {
            canvas = document.createElement('canvas');
            chartContainer.appendChild(canvas); 
        }
        var ctx = canvas.getContext('2d');
        var chart = new Chart(ctx, {
            type: 'radar',
            data: chartData,
            options: getChartOptions()
        });
        chartDataElement.initialized = true;
    }
}
mw.loader.using('ext.chartjs', function () {
    $(document).ready(function() {
        initializeCharts();
    });
});