Allow user to select Week, Month, Year on Column Chart

[gwolfe]

I feel like I saw a post for this recently but I can't find it. I want my user to be able to toggle the date aggregation (week, month year) on a column chart. Does anyone have a script for this?

[HamzaJ]

Hey @gwolfe ,

I found these from Sisense themselves:

https://community.sisense.com/t5/knowledge/dynamic-dimension-value-chart/ta-p/9443

https://www.sisense.com/marketplace/switchable-dimensions/

I myself use the @Ravid_PaldiTeam Advanced Dim Switcher. Works very well and can be easily implemented

[gwolfe · Accepted solution]

BINextLevel.com was able to help me out with the following script. It works perfectly.

widget.on('processresult', function(se, ev){ 
ev.result.chart.spacing = [20, 20, 77, 20 ]
});

widget.on("domready", function(w){

let chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
let chartContainer = $('.highcharts-container', element)

//Time period dropdown
let timePeriods = {'Weekly': 'weeks',
  'Monthly': 'months',
  'Quarterly': 'quarters',
  'Yearly': 'years'}

let ddTimePeriodId = `select-timeperiod-${w.oid}`
let dropdownHTMLTimePeriods = `<select style="padding: 5px 10px; background:#FFFFFF; border: 1px solid #c0c1c2; margin:2px 5px;" name="select" id="${ddTimePeriodId}"></select>`

if($(`#${ddTimePeriodId}`).length)
{
$(`#${ddTimePeriodId}`).remove()
}

chartContainer.before(dropdownHTMLTimePeriods)

for(let key in timePeriods){
$(`#${ddTimePeriodId}`).append(`<option value="${key}">${key}</option>`)
}

document.getElementById(`${ddTimePeriodId}`).value = Object.keys(timePeriods).find(key => timePeriods[key] == widget.metadata.panels[0].items[0].jaql.level)
var select = document.getElementById(`${ddTimePeriodId}`);

select.addEventListener('change', (e) => {

 let selectedItem= e.target.value

 widget.metadata.panels[0].items[0].jaql.level = timePeriods[selectedItem]

 widget.refresh();

});

});