Display Last 30 days by Default

Hello Helical Insight,

I have a dashboard which has data for many years. However, I want the dashboard to open with the default view of last 30 days. After that, the user can choose the date range for which he wants to see the data. How can I do this?

Thank You,
Sesa

Hello sesa,

In order to do this, create report with 2 date filters – one as ‘StartDate’ and another as ‘EndDate’ with conditions “greater than equal to” and “less than equal to” respectively.

Reference URLs

Filters usage : http://www.helicalinsight.com/ad-hoc-report-module/filter-conditions/

Various filter conditions explanation : http://www.helicalinsight.com/ad-hoc-report-module/filter-conditions/

Now, add the reports to the dashboard and add the 2 filters as dashboard inputs (below are 2 reference URL for further reading).

adding input parameters : http://www.helicalinsight.com/dashboard-designer-customization/input-parameters/

multiple input parameters with submit button : http://www.helicalinsight.com/dashboard-designer-customization/multiple-input-parameters-submit-button/

The dashboard will open with some default dates as set at the report level. Refer below image:

image

Now, add a Custom component on the dashboard.

image

Click on Edit (pencil icon) on the custom component. Add the below script in the custom script section of the custom component.

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
var today = yyyy + '-' + mm + '-' + dd;
Dashboard.setVariable('EndDate',today);

var priorDate = new Date();
priorDate.setDate(priorDate.getDate() - 30)
var dd = String(priorDate.getDate()).padStart(2, '0');
var mm = String(priorDate.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = priorDate.getFullYear();
var last30Day = yyyy + '-' + mm + '-' + dd;
Dashboard.setVariable('StartDate',last30Day);

image

In the above code we are fetching the current date value and extracting DD MM and YYYY from it and passing it to StartDate. Since monthnumber in JS starts from 0 to 11 whereas actually its 1 to 12 the same is also handled. Also if the date or month is single digit like 1 or 5 the same is also converted into double digit 01 or 05 etc.

On a similar lines to the dashboardVariable EndDate we are passing it a value which is StartDate minus 30 along with the other logic mentioned in the above paragraph.

Click on Save and refresh the dashboard. It will open with values of last 30 days by default with further the option of selecting the date range and accordingly the data will get changed.

Thank You
From Team Helical.