Adding a Dropdown to Change Date Granularity in Charts

Being able to adjust the date granularity in charts is essential for effective data analysis. Users might want to switch from yearly to quarterly or monthly views depending on their specific needs—such as spotting long-term trends, analyzing seasonal performance, or evaluating monthly campaigns.

While creating a Blox button is one way to implement this feature, you can also quickly add a dropdown directly to your chart. This simple widget script allows users to toggle between year, quarter, and month views seamlessly, enhancing interactivity and making data exploration easier than ever.

Steps:

1. Open Your widget where you wnat to add the dropdown

2. Insert below widget Script

3. Save and Refresh the Widget

let dropdownStyle = `
	padding: 5px 10px; 
	background:#FFFFFF; 
	border: 1px solid #d6d3d3; 
	margin:2px 5px; 
	width: 90px; 
	border-radius: 4px;
	color: rgb(91, 99, 114)`;

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

widget.on("domready", function(se){

	const chart = widget.chart[0][Object.keys(widget.chart[0])[0]].hc;
	const chartContainer = prism.activeWidget ? $('.highcharts-container') : $(`widget[widgetid=${widget.oid}] .highcharts-container`);

	//Time period dropdown
	const timePeriods = {
		'Weekly': 'weeks',
		'Monthly': 'months',
		'Quarterly': 'quarters',
		'Yearly': 'years'
	};

	let ddTimePeriodId = `select-timeperiod-${widget.oid}`;
	let dropdownHTMLTimePeriods = `<select style="${dropdownStyle}" 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();
	});

});