Sisense widget script: Add persistent scroll bar

In this tutorial, we'll focus on enhancing chart navigation in Sisense dashboards by implementing a persistent scroll bar 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 scroll bar, used for navigating through data points, remains present for improved user experience. We'll explore two scenarios- one where the scroll bar is always visible and another where it appears based on a threshold.

Scenario 1: Keeping the Scroll Bar Always Present

Step 1: Widget design panel changes

Disable the 'Auto Zoom' toggle button from widget's design panel.

Step 2: 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('processresult', function (se, ev) {
	
    // Enable the scroll bar
    ev.result.xAxis.scrollbar = {
        enabled: true
    };

    // Set the visible range of data points
    ev.result.xAxis.min = 0;
    ev.result.xAxis.max = 4;
	
});

Step 3: Understanding the Code Logic

The event handler widget.on('processresult', function (se, ev) {...} triggers when the widget's results are processed.

By setting ev.result.xAxis.scrollbar.enabled to true, you ensure the scroll bar remains present.

ev.result.xAxis.min and ev.result.xAxis.max define the range of visible data points on the x-axis.

Step 4: Applying the Changes

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

Scenario 2: Showing the Scroll Bar Based on a Threshold

Step 1: Widget design panel changes

Disable the 'Auto Zoom' feature from widget design panel. (same as Step 1 from Scenario 1)

Step 2: 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('processresult', function (se, ev) {
	
    // Check if the number of data points exceeds a threshold
    if (ev.result.xAxis.categories.length > 7) {
		
        // Enable the scroll bar
        ev.result.xAxis.scrollbar = {
            enabled: true
        };

        // Set the visible range of data points
        ev.result.xAxis.min = 0;
        ev.result.xAxis.max = 4;
    }
});

Step 3: 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 scroll bar is enabled, and the visible data point range is limited.

Step 4: Applying the Changes

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

By exploring both scenario- keeping the scroll bar always present and showing it based on a threshold we can provide users with a seamless and efficient way to navigate through data-rich charts.

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