How to dynamically change date view and format with buttons [Linux]

Step-by-step Guide

1. Create or navigate to a widget of your choice with one of the types previously mentioned and open the script editing screen.

2. Next, enter the following script:

widget.on("domready", function(se, ev) {
    const widgetId = widget.oid;
    const containerSelector = prism.activeWidget
        ? $('.highcharts-container')
        : $(`widget[widgetid=${widgetId}] .highcharts-container`);

    // Remove old buttons if they exist
    $("#toggle-date-buttons-" + widgetId).remove();

    // Create button container
    const buttonsHtml = `
      <div id="toggle-date-buttons-${widgetId}" style="display:flex;justify-content:center;align-items:center;margin-bottom:16px;margin-top:5px;">
        <button id="weekly-btn-${widgetId}" style="margin-right:10px;cursor:pointer; background:#94F5F0; border:none; border-radius:4px; padding: 7px;">Weekly view</button>
        <button id="monthly-btn-${widgetId}" style="cursor:pointer; background:#94F5F0; border:none; border-radius:4px; padding: 7px;">Monthly view</button>
      </div>
    `;
	
    // Insert button container before the chart
    containerSelector.before(buttonsHtml);
	
    // Button listeners
	const defaultPanel = widget.metadata.panels[0];

	$(`#weekly-btn-${widgetId}`).on('click', () => {
		if (defaultPanel && defaultPanel.items && defaultPanel.items.length > 0) {
			defaultPanel.items[0].jaql.level = 'weeks'; // Date level you want to change to
			defaultPanel.items[0].format = defaultPanel.items[0].format || {};
			defaultPanel.items[0].format.mask = defaultPanel.items[0].format.mask || {};
			defaultPanel.items[0].format.mask.weeks = 'MMM dd'; // Format you want to show
			delete defaultPanel.items[0].format.mask.isdefault;
			widget.refresh();
		}
	});

	$(`#monthly-btn-${widgetId}`).on('click', () => {
		if (defaultPanel && defaultPanel.items && defaultPanel.items.length > 0) {
			defaultPanel.items[0].jaql.level = 'months'; // Date level you want to change to
			defaultPanel.items[0].format = defaultPanel.items[0].format || {};
			defaultPanel.items[0].format.mask = defaultPanel.items[0].format.mask || {};
			defaultPanel.items[0].format.mask.months = 'MMM'; // Format you want to show
			delete defaultPanel.items[0].format.mask.isdefault;
			widget.refresh();
		}
	});
});

3. You should see a similar result if using a Line Chart:

4. If you click weekly view, the date view and format should change accordingly to what you configured:

5. And if you click Monthly view, it should do the same, but for what you configured for the monthly view:

Conclusion

By following the steps above, you can easily enable end-users to switch between different date views and formats using custom buttons in Sisense widgets. This interactive approach improves dashboard usability and empowers users to analyze data in the context most relevant to their needs.

Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.