Pivot Chart for Household Income Survey Analysis

This example demonstrates how to analyze household income data alongside key demographic dimensions using an interactive pivot chart from the SurveyJS Dashboard library. Users can dynamically reconfigure categories, series, and aggregation settings to uncover patterns, identify disparities, and explore correlations within the dataset.

To add a pivot chart to the Dashboard, create a dashboard item with the type property set to "pivot". Specify the item's name and title:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  data: dataFromServer,
  items: [{
    name: "pivot-chart",
    type: "pivot",
    title: "Household Income and Demographics Analysis"
  }]
});

Configure data binding and other pivot chart settings using the visualizer object. Assign survey questions available for user selection to the questions array and define the following data fields:

• categoryField
  The data field whose values form categories along the X axis.

• seriesField (within each object in the series array)
  The data field whose values define individual series and appear in the legend.

• valueField (within each object in the series array)
  The data field whose values are aggregated and plotted on the Y axis. If not set, the seriesField is used.

Users can change selected data fields at runtime.

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  data: dataFromServer,
  items: [{
    name: "pivot-chart",
    type: "pivot",
    title: "Household Income and Demographics Analysis",
    visualizer: {
      questions: survey.getAllQuestions(),
      categoryField: "education_level",
      series: [{
        valueField: "annual_income",
        seriesField: "employment_status"
      }]
    }
  }]
});

Pivot values can be aggregated using different methods. By default, values are counted. To aggregate numeric data (for example, income), set a series' aggregation property to "sum", as shown below.

Users can switch the aggregation method at runtime.

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  // ...
  items: [{
    name: "pivot-chart",
    type: "pivot",
    // ...
    visualizer: {
      // ...
      series: [{
        valueField: "annual_income",
        seriesField: "employment_status",
        aggregation: "sum" // default: "count"
      }]
    }
  }]
});

The secondary Y axis allows you to plot multiple measures with different scales on the same chart (for example, total income and respondent count). This is useful when combining metrics that are not directly comparable on a single axis.

To enable the secondary Y axis, set the useSecondaryYAxis property to true. Then assign a series to the secondary axis by setting its yAxis property to "secondary":

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  // ...
  items: [{
    name: "pivot-chart",
    type: "pivot",
    // ...
    visualizer: {
      // ...
      series: [{
        seriesField: "series1"
      }, {
        seriesField: "series2",
        yAxis: "secondary"
      }],
      useSecondaryYAxis: true
    }
  }]
});

Users can enable or disable the secondary Y axis and move series between axes at runtime. In this demo, open the pivot chart settings, enable the Secondary Y axis option, and select which series should be plotted against it.