Sisense widget script: Add persistent slider

In this tutorial, we'll explore how to enhance chart navigation in Sisense dashboards by implementing a persistent slider using widget script.

In Sisense, there is an option to enable 'Auto Zoom' feature from widget design panel which adds a slider to the chart widget. However, this default slider threshold seems to be too high and I've noticed the slider not being added even when the number of bars are as many as 20.

This script ensures that the slider, which allows users to scroll through data points, remains visible as needed. We'll cover two scenarios: one where the slider is always present and another where the slider appears based on a threshold.

Scenario 1: Keeping the Slider Always Present

Step 1: Adding the widget script

Begin by opening your Sisense dashboard in the Edit mode. Locate the chart for which you want to implement this. Add the following code into the widget's script editor.

widget.on('beforeviewloaded', function (ev, args) {
	
	// Enable the slider
    args.options.navigator.enabled = true; 
	
	// Set the maximum visible data points counting from 0 
	// So 5 bars will be displayed in this case
    args.options.xAxis.max = 4; 

});

Step 2: Understanding the Code Logic

The event handler widget.on('beforeviewloaded', function (ev, args) {...} is triggered before the view is loaded.

By setting args.options.navigator.enabled to true, you ensure that the persistent slider is enabled for the chart widget.

args.options.xAxis.max determines the maximum number of visible data points in the chart.

Step 3: Applying the Changes

After adding the script, click "Save" to apply the changes and refresh the widget. Your chart widget will now display the slider.

Scenario 2: Showing the Slider Based on a Threshold

Step 1: Adding the widget script

Begin by opening your Sisense dashboard in the Edit mode. Locate the chart for which you want to implement this. Add the following code into the widget's script editor.

widget.on('beforeviewloaded', function (ev, args) {
	
	// Set the threshold 
    if (args.options.xAxis.categories.length > 7) {
		
		// Enable the slider
        args.options.navigator.enabled = true; 
		
		// Set the maximum visible data points counting from 0 
		// So 5 bars will be displayed in this case		
        args.options.xAxis.max = 4; 
    }
	
});

Step 2: Understanding the Code Logic

This code follows a similar structure to the previous scenario.

The script checks if the number of data points exceeds a threshold (7 in this case).

If the condition is met, the persistent slider is enabled, and the maximum visible data points are limited.

By exploring two scenarios- keeping the slider always present and showing it based on a threshold we've gained the ability to provide users with a seamless and informative data visualization experience.

GitHub link : https://github.com/lekhamirjankar/Sisense-scripts