Forum Discussion

Astroraf's avatar
Astroraf
Data Integration
11-19-2025
Solved

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 S...
CUSTOM DATE RANGE
dashboard design
DATE RANGE
  • Liliia_DevX's avatar
    Liliia_DevX
    11-20-2025

    Hi :)

    Please try this approach suggested by OleksiiDemianyk​. On the client you need to:

    • Add 6 days to each date returned by Sisense;
    • Change category from the default one to the ${startWeekDate} - ${startWeekDate + 7 days}

    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!

Liliia_DevX's avatar
Liliia_DevX
Sisense Employee
11-20-2025

Hi :)

Please try this approach suggested by OleksiiDemianyk​. On the client you need to:

  • Add 6 days to each date returned by Sisense;
  • Change category from the default one to the ${startWeekDate} - ${startWeekDate + 7 days}

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!

Astroraf's avatar
Astroraf
Data Integration
11-21-2025

Hi 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_DevX's avatar
    Liliia_DevX
    Sisense Employee
    12-04-2025

    Hi,

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