DataSrc:T241b

The SRF Graph printer requires the GraphViz, Diagrams or External Data (with <graphviz> tag defined in Tag emulation mode) extension to be installed.

<echarts> <script> // Retrieve your data as JSON using an askjson query. // (Make sure your query returns valid dates and numeric participants.) var askData = {{#askjson:

 DataSrc:T241bProperty "-Has subobject" has a restricted application area and cannot be used as annotation property by a user.
 |?entry_date
 |?participants
 |?status_of_mobility_participant
 |limit=100
 |sort=entry_date
 |order=ascending

}};

// Prepare arrays to hold unique x-axis dates and series data. var xAxisDates = []; // will hold sorted dates (as strings) var seriesData = {}; // an object keyed by status

// Process each data row. askData.forEach(function(item) {

 // Assume item.entry_date is in a format ECharts can display (like "2024-02-01")
 var date = item.entry_date;
 // Ensure the date is recorded in the x-axis array.
 if (xAxisDates.indexOf(date) === -1) {
   xAxisDates.push(date);
 }
 
 // Get the group/status.
 var status = item.status_of_mobility_participant;
 if (!seriesData[status]) {
   seriesData[status] = {};
 }
 
 // Record the participant count. Convert to number in case it's a string.
 seriesData[status][date] = parseFloat(item.participants);

});

// Sort the x-axis dates. xAxisDates.sort();

// Build the series array. For each status, align data with the x-axis dates. var legendData = []; var seriesArray = [];

for (var status in seriesData) {

 legendData.push(status);
 // Build data array for this status.
 var dataArray = xAxisDates.map(function(date) {
   // If no value exists for this date, use 0.
   return seriesData[status][date] || 0;
 });
 
 seriesArray.push({
   name: status,
   type: 'line',       // line chart; change to 'bar' if you prefer columns.
   stack: 'Total',     // this enables stacking
   areaStyle: {},      // makes it an area chart (stacked area)
   emphasis: { focus: 'series' },
   data: dataArray
 });

}

// Build the ECharts option object. var option = {

 title: {
   text: 'BIP Mobilities'
 },
 tooltip: {
   trigger: 'axis',
   axisPointer: {
     type: 'cross',
     label: { backgroundColor: '#6a7985' }
   }
 },
 legend: {
   data: legendData
 },
 toolbox: {
   feature: { saveAsImage: {} }
 },
 grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
 },
 xAxis: [{
   type: 'category',
   boundaryGap: false,
   data: xAxisDates
 }],
 yAxis: [{
   type: 'value'
 }],
 series: seriesArray

};

// Initialize the chart in the div with id "myChart" (or let the extension handle it). // If the ECharts extension expects the option variable, just output it. echarts.init(document.getElementById('myChart')).setOption(option); </script>

</echarts>