Histogram Widget - Interactive Script

[alex-frisbie]

Histogram Widget - Interactive Script

Analytical Need

The Histogram widget is great for showing the distribution of a metric across different intervals. However, this widget is not interactive, which makes it difficult for the viewer to drill into points of interest such as edge cases.

Solution

This script makes the histogram interactive, enabling the viewer to click on a histogram bar to filter the dashboard to that interval.

function applyFilter(dash, metric_jaql, start, end) {
	var jaql = {
		'datatype': metric_jaql.datatype,
		'dim': metric_jaql.dim,
		"filter": {
			">": start,
			"<": end
	 	},
		"title": metric_jaql.title
	};
	var applyJaql = {
		jaql: jaql
	};
	dash.filters.update(applyJaql)
	dash.refresh()

}

widget.on('ready', function (se, ev) {
	var dash = ev.widget.dashboard
	var metric_jaql = ev.widget.metadata.panels[1].items[0].jaql
	var histbars = document.querySelectorAll(".histbar");
	var ticks = document.querySelectorAll(".tick");
	histbars.forEach(function(element, index) {
    element.addEventListener("click", function() {
				applyFilter(dash, metric_jaql, ticks[index].textContent, ticks[index+1].textContent)
    });
	});
});

Future Improvements

• Highlighting the histogram bar on mouse over
• Enabling a 'clear filters' button on the histogram to remove the applied filter