|
|
| Line 63: |
Line 63: |
| |class=sortable wikitable smwtable | | |class=sortable wikitable smwtable |
| }} | | }} |
| <echarts>
| |
| <script>
| |
| // Retrieve your data as JSON using an askjson query.
| |
| // (Make sure your query returns valid dates and numeric participants.)
| |
| var askData = {{#askjson:
| |
| [[-Has subobject::{{FULLPAGENAME}}]]
| |
| |?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>
| |
| <div id="myChart" style="width: 600px; height: 400px;"></div>
| |
| </echarts>
| |
