Dynamic Layout Management in SurveyJS Dashboard

Dynamic layout management is an interactive feature that automatically arranges dashboard items and allows users to customize the layout by showing or hiding items and repositioning them via drag-and-drop.

Dynamic layout management is available for all visualization types.

To hide a dashboard item, click the X button in its top-right corner.

All items—both visible and hidden—are listed in the All questions drop-down menu in the toolbar. Use this menu to control visibility by selecting or clearing individual checkboxes, or by clicking Select all or Clear selection.

View Demo

In code, item visibility is controlled by the visible property. You can define it when configuring the items array or update it at runtime via the getItem() method:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: [ /* Survey questions to visualize */ ],
  data: [ /* Survey responses to aggregate */ ],
  items: [
    {
      name: "question1",
      visible: false
    },
    // ...
  ]
});

dashboard.getItem("question1").visible = true;

To prevent users from changing item visibility at runtime, set the allowHideQuestions property to false:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: [ /* ... */ ],
  data: [ /* ... */ ],
  items: [ /* ... */ ],
  allowHideQuestions: false // Disables visibility changes
});

To reposition a dashboard item, drag it using the handle located at its center.

View Demo

In code, you can control item order by arranging entries in the items array. Items are laid out row by row (not column by column), so their order in the array determines their placement:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: [ /* ... */ ],
  data: [ /* ... */ ],
  items: [
    "question1", "question2",
    "question3", "question4",
    "question5", "question6",
    // ...
  ]
});

• Date Range Filtering
• Cross-Filtering
• Sorting
• Visualization Type Selection
• Legend-Based Series Toggling