Filter Dashboard Data by Date

SurveyJS Dashboard allows you to filter dashboard data by date using a dedicated date panel. This panel includes the following UI elements:

• Date editors for selecting the start and end dates of a custom range
• A drop-down list with predefined date periods ("Last 7 days", "Last month", "This year to date", etc.)
• A checkbox that includes or excludes the current day for relative periods (for example, "This year to date")
• A counter that displays the number of responses matching the applied filter

This topic explains how to enable date filtering, customize the list of predefined date periods, handle date range changes, and apply a fixed (non-editable) date filter.

Date filtering requires a timestamp field in your response data. Assign the name of this field to the Dashboard's dateFieldName option. When this option is specified, the date panel is displayed automatically.

import { Dashboard } from "survey-analytics";

const dashboardOptions = {
  questions: [ /* ... */ ],
  data: [
    {
      // ...
      timestamp: "2026-02-22T13:40:34.954Z"
    },
    {
      // ...
      timestamp: "2026-02-23T09:23:41.512Z"
    },
    // ...
  ],
  dateFieldName: "timestamp"
};
const dashboard = new Dashboard(dashboardOptions);

View Demo

Predefined date periods allow users to select a date range without manually specifying start and end dates. SurveyJS Dashboard supports the following period identifiers:

• "last7days"
• "last14days"
• "last28days"
• "last30days"
• "lastWeekSun"
• "lastWeekMon"
• "lastMonth"
• "lastQuarter"
• "lastYear"
• "ytd"
• "mtd"
• "wtdSun"
• "wtdMon"
• "qtd"

To restrict the list of available periods, specify the allowed identifiers in the availableDatePeriods array.

To define an initial period or retrieve the currently selected one, use the datePeriod property. The example below sets "Last 30 days" as the initial period:

import { Dashboard } from "survey-analytics";

const dashboardOptions = {
  questions: [ /* ... */ ],
  data: [ /* ... */ ],
  dateFieldName: "timestamp",
  datePeriod: "last30days"
};
const dashboard = new Dashboard(dashboardOptions);

View Demo

To react to changes in the selected date range, use the onDateRangeChanged event. This event is raised when users select a predefined period or define a custom date range.

The event handler receives an options object. The options.dateRange property contains an array in the format [startDate, endDate] and is always defined. The options.datePeriod property contains the identifier of the selected predefined period. If users specify a custom date range, options.datePeriod is undefined.

import { Dashboard } from "survey-analytics";

const dashboardOptions = {
  // ...
};
const dashboard = new Dashboard(dashboardOptions);
dashboard.onDateRangeChanged.add((_, options) => {
  const dateRange = options.dateRange; // [ startDate, endDate ]
  const datePeriod = options.datePeriod; // undefined for custom ranges
  // ...
  // Custom logic here
  // ...
});

You can apply a predefined period or custom date range and prevent users from modifying it. To do this, specify either the datePeriod or dateRange option and set the showDatePanel option to false:

import { Dashboard } from "survey-analytics";

const dashboardOptions = {
  questions: [ /* ... */ ],
  data: [ /* ... */ ],
  dateFieldName: "timestamp",

  // Option 1: Predefined period
  datePeriod: "last7days",

  // Option 2: Custom range
  // dateRange: ["2026-02-01", "2026-02-10"],

  showDatePanel: false
};
const dashboard = new Dashboard(dashboardOptions);

This configuration applies the specified date filter and hides the date panel, making the filter impossible to edit for dashboard users.

• Cross-Filtering
• Sorting
• Visualization Type Selection
• Legend-Based Series Toggling
• Dynamic Layout Management