View source for Widget:MobilityChart

<div id="mobility-chart-container" style="width: 1000px; height: 600px;"></div>

<script type="text/javascript">
if (typeof echarts === 'undefined') {
    var script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
}

// Wait for both DOM and potential script injection to clear
window.addEventListener("load", function() {
    try {
        // Grab the raw loop data from the widget parameter
        var rawInput = "";
        
        // Clean up formatting and parse it into a real JS Array literal
        var cleanJsonString = '[' + rawInput.replace(/,\s*$/, '') + ']';
        var rawData = JSON.parse(cleanJsonString);
        
        var chartDom = document.getElementById('mobility-chart-container');
        var myChart = echarts.init(chartDom);
        
        var option = {
            legend: { top: '5%' },
            tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
            dataset: {
                source: rawData
            },
            xAxis: { 
                type: 'category', 
                name: 'Type of Mobility', 
                axisLabel: { rotate: 20, interval: 0 } 
            },
            yAxis: { type: 'value', name: 'Participants' },
            grid: { top: '15%', left: '3%', right: '4%', bottom: '20%', containLabel: true },
            series: [
                { name: 'Student bachelor', type: 'bar', encode: { x: 'Type_of_mobility', y: 'Participants' }, filter: { Status_of_mobility_participant: 'Student_bachelor' } },
                { name: 'Student master', type: 'bar', encode: { x: 'Type_of_mobility', y: 'Participants' }, filter: { Status_of_mobility_participant: 'Student_master' } },
                { name: 'Student doctorate', type: 'bar', encode: { x: 'Type_of_mobility', y: 'Participants' }, filter: { Status_of_mobility_participant: 'Student_doctorate' } },
                { name: 'Student Assembly member', type: 'bar', encode: { x: 'Type_of_mobility', y: 'Participants' }, filter: { Status_of_mobility_participant: 'Student Assembly member' } }
            ],
            color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666']
        };

        myChart.setOption(option);
    } catch (e) {
        console.error("ECharts Widget crashed: ", e);
    }
});
</script>