How to create a week date range with start and end if the week for each week?
Hi DRay Liliia_DevX ,
I am looking to create a week range for a line/column/bar chart where lets say it is the 30th week of 2024, then the 31st, 2024 and I want the 30th and 31 st week to shows Sep 24 - Sep 31 2024, etc. Is there a way to achieve this within the model or in the back end of a live data model.
Rafael Ferreira
Posted 8 months ago·Last reply 8 months ago
4 comments
DRay
·8 months agoHi Astroraf,
I’m following up to see if the solution offered by Liliia_DevX worked for you.
If so, please click the 'Accept as Solution' button on their post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.
Thank you.
Liliia Kislitsyna
Admin8 months agoHi :)
Please try this approach suggested by OleksiiDemianyk. On the client you need to:
This can be done on the event beforeviewloaded. Here is the sample where we have week as the only category:
const months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }; widget.on('beforeviewloaded', (scope, args) => { const [ seria ] = args.options.series; seria.data.forEach((point, index) => { const startDate = formatDate(point.selectionData[0]); const endDate = formatDate(new Date( new Date(point.selectionData[0]).getTime() + 6 * 24 * 60 * 60000), true); args.options.xAxis.categories[index] = `${startDate} - ${endDate}`; }) }) function formatDate( dateItem, returnYear = false ) { const [ year, monthIndex, date ] = dateItem.toISOString().substr(0, 10).split('-'); const monthString = months[parseInt(monthIndex)]; return returnYear ? `${date} ${monthString} ${year}` : `${date} ${monthString}`; }
Hope that helps!
Rafael Ferreira
OP8 months agoHi Liliia_DevX ,
Is there a way to do this without a widget edit script? As Compose SDK by Widget ID does not allow widget edit scripts to be render the changes when embedding.
Liliia Kislitsyna
Admin8 months agoHi,
It should be possible to add custom columns in the model for the start and end dates and concatenate them into a string to use as the dimension. Otherwise, swap 'beforeviewloaded' for onBeforeRender prop in CSDK and use the same logic to manipulate highcharts options.
Hope that helps :)