Widget:MobilityChart

<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>