Forum Discussion

gwolfe's avatar
gwolfe
ETL
07-22-2024
Solved

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?

Dashboards & Reporting
  • gwolfe's avatar
    gwolfe
    07-22-2024

    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();

});

});

     

2 Replies

  • gwolfe's avatar
    gwolfe
    ETL
    07-22-2024

    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();

});

});