Elegant Buttons to Switch Between Two Measures

When analyzing data, it’s helpful to see both actual numbers and percentage values. For example, you might want to know how many students passed each subject and what percentage that represents. While you can use buttons or a dropdown menu to switch between these two measures, I've created a new script specifically for this purpose. This script adds elegant buttons that allow users to easily switch between the count and the percentage. This not only enhances the visual appeal but also makes it simpler for everyone to understand and interpret the data at a glance.

Steps:

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

2. Widget should contain only one category(dimension). Create 2 Values panels 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("domready", function(w){

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

	const button1_Id = `button1-${w.oid}`;
	const button2_Id = `button2-${w.oid}`;

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

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

	const item1Title = w.metadata.panels[1].items[0].jaql.title;
	const item2Title = w.metadata.panels[1].items[1].jaql.title;

	button1 = `<button title="Count" style="width:45px; height:26px; border-radius:10px 0px 0px 10px; cursor:pointer; border: 1px solid #7b1199; margin: 5px 0px 0px 10px" id="${button1_Id}">${item1Title}</button>`

	chartContainer.before(button1)

	button2 = `<button title="Percent" style="width:45px; height:26px;border-radius:0px 10px 10px 0px; cursor:pointer; border: 1px solid #7b1199; " id="${button2_Id}">${item2Title}</button>`

	chartContainer.before(button2)
	const panelItemIndex = w.metadata.panels[1].items.findIndex(el => !el.disabled)

	const button1_select = document.getElementById(button1_Id);
	const button2_select = document.getElementById(button2_Id);

	if(panelItemIndex === 0) {
		setButtonActive(button1_select);
		setButtonInactive(button2_select);
	} else {
		setButtonActive(button2_select);
		setButtonInactive(button1_select);
	}

	button1_select.addEventListener('click', (e) => {
		const panelTitle = w.metadata.panels[1].items[0].jaql.title;
		enablePanelByTitle(panelTitle);
	})

	button2_select.addEventListener('click', (e) => {
		const panelTitle = w.metadata.panels[1].items[1].jaql.title;
		enablePanelByTitle(panelTitle);
	})

});


function enablePanelByTitle(panelTitle) {
	const panelIndex = widget.metadata.panels[1].items.findIndex((el, index) => el.jaql.title === panelTitle);

	if (panelIndex < 0)
		return;

	widget.metadata.panels[1].items.forEach((el, index) => {
		el.disabled = index != panelIndex
	})

	widget.refresh();
}

function setButtonActive(element) {
	element.style.backgroundColor = '#7b1199';
	element.style.color = '#ffffff'
}

function setButtonInactive(element) {
	element.style.backgroundColor = '#ffffff';
	element.style.color = '#7b1199'
}