top of page

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

});


149 views1 comment

1件のコメント

5つ星のうち0と評価されています。
まだ評価がありません

評価を追加
garrett
2024年10月16日

I love this so much. Thanks for helping us.

いいね!
BI Next Level white logo

BI Next Level is your trusted resource for BI customization, data solutions, and expert insights. Explore practical tips, scripts, and tutorials for tools like Sisense, Python, and SQL. Let’s transform your data into impactful insights together.

Quick Links
Connect with us
Copyright © 2024. All Rights Reserved. Designed, Developed & Maintained  by Intertoons
bottom of page