gwolfe
07-22-2024ETL
Allow user to select Week, Month, Year on Column Chart
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?
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(); }); });