Switchable Measure Dropdown

Here is a script to add a dropdown to switch between different measures/calculation.

For example, in below screenshot, each item in dropdown represent different calculations and when we select an item from it, chart will show corresponding calculated values in Y-Axis. (The X-axis won't change)

Steps:

1. Create a bar/column/line/are chart

2. Widget should contain only one category(dimension). You can create as many Values panels as required and enable only one panel. The script will generate one button per Value panel and will be able to switch between panels by clicking on buttons.

3. Add below script to widget

4. Save the script and refresh widget

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

widget.on("domready", function(w){
		
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
	
	var buttonList = new Array(w.metadata.panels[1].items.length)
	chartContainer = $('.highcharts-container', element)
	
	dropdownHTML = `<select style="padding: 5px 10px; background:#FFFFFF; border: 1px solid #c0c1c2; margin:2px 5px;" name="select" id="select-${w.oid}"></select>`
	
	
	if($(`#select-${w.oid}`).length)
	{
		$(`#select-${w.oid}`).remove()
		chartContainer.height(chartContainer.height() + 77);
	}
	chartContainer.before(dropdownHTML)
	
	$.each(w.metadata.panels[1].items, function(index, value){
		$(`#select-${w.oid}`).append(`<option value="Item${index}">${value.jaql.title}</option>`)
	})	
	
	chartContainer.height(chartContainer.height() - 77);
	
	selecteIndex = w.metadata.panels[1].items.findIndex(el=>el.disabled == false)	 
	document.getElementById(`select-${widget.oid}`).value = 'Item' + selecteIndex
	var select = document.getElementById(`select-${widget.oid}`);

	select.addEventListener('change', (e) => {
		
	  var selectedPanelIndex = parseInt(e.target.value.replace('Item', ''))

	  $.each(w.metadata.panels[1].items, function(itemIndex, itemValue){
		if(itemIndex == selectedPanelIndex)
			itemValue.disabled = false
		else
			itemValue.disabled = true

	  })
	  widget.refresh();

	});

});