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
