Showing results for 
Search instead for 
Did you mean: 
Sisense Team Member
Sisense Team Member

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.


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


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
Version history
Last update:
‎02-13-2024 12:08 PM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: