Forum Discussion

gwolfe's avatar
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?

  • 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

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