SurveyJS Survey Analytics

https://github.com/surveyjs/survey-analytics
Admin
The SurveyJS Dashboard library enables the creation of survey data dashboards, simplifying analysis...
Tokens:24,864
Snippets:275
Trust Score:7.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run test examples

Source: https://github.com/surveyjs/survey-analytics/blob/master/README.md

Start a local development server to view examples.

```bash
npm start
```

--------------------------------

### Full Visualization Panel Implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-react.md

A complete example showing the setup of survey data, results, and the Visualization Panel component in React.

```js
// components/Dashboard.tsx
import 'survey-analytics/survey.analytics.css';
import { useState } from 'react';
import { Model } from 'survey-core';
import { IVisualizationPanelOptions, VisualizationPanel } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

export default function DashboardComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [vizPanel, setVizPanel] = useState<VisualizationPanel>();
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }

  if (!vizPanel && !!survey) {
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
    setVizPanel(vizPanel);
  }

  return "...";
}
```

--------------------------------

### Full implementation example

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-angular.md

A complete example showing the HTML template and the full Angular component implementation.

```html
<div id="surveyDataTable"></div>
```

```js
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { Tabulator } from 'survey-analytics/survey.analytics.tabulator';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

function randomIntFromInterval(min: number, max: number): number {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
  const data = [];
  for (let index = 0; index < 100; index++) {
    const satisfactionScore = randomIntFromInterval(1, 5);
    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6);
    data.push({
      "satisfaction-score": satisfactionScore,
      "nps-score": npsScore
    });
  }
  return data;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const surveyDataTable = new Tabulator(
      survey,
      generateData()
    );
    surveyDataTable.render("surveyDataTable");
  }
}
```

--------------------------------

### Full Angular Component Implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-angular.md

A complete example showing the setup of survey data, results, options, and the VisualizationPanel instantiation in an Angular component.

```typescript
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { VisualizationPanel } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'SurveyJS Dashboard for Angular';

  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
  }
}
```

--------------------------------

### Full Dashboard Component Implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-react.md

A complete example showing the setup of the Survey model, results, and Visualization Panel within a React component.

```js
// components/Dashboard.tsx
'use client'

import { useState, useEffect } from 'react';
import 'survey-analytics/survey.analytics.css';
import { Model } from 'survey-core';
import { IVisualizationPanelOptions, VisualizationPanel } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions: IVisualizationPanelOptions = {
  allowHideQuestions: false
}

export default function DashboardComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [vizPanel, setVizPanel] = useState<VisualizationPanel>();
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }

  if (!vizPanel && !!survey) {
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
    setVizPanel(vizPanel);
  }

  useEffect(() => {
    vizPanel?.render("surveyVizPanel");
    return () => {
      vizPanel?.clear();
    }
  }, [vizPanel]);

  return (
    <div id="surveyVizPanel" />
  );
}
```

--------------------------------

### Full Table View implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-vue.md

A complete example showing imports, data generation, component instantiation, and rendering.

```html
<script setup lang="ts">
import 'tabulator-tables/dist/css/tabulator.css';
import 'survey-analytics/survey.analytics.tabulator.css';
import { Model } from 'survey-core'
import { Tabulator } from 'survey-analytics/survey.analytics.tabulator'
import { onMounted } from "vue"

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

function randomIntFromInterval(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
  const data = [];
  for (let index = 0; index < 100; index++) {
    const satisfactionScore = randomIntFromInterval(1, 5);
    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6);
    data.push({
      "satisfaction-score": satisfactionScore,
      "nps-score": npsScore
    });
  }
  return data;
}

onMounted(() => {
  const survey = new Model(surveyJson);
  const surveyDataTable = new Tabulator(
    survey,
    generateData()
  );
  surveyDataTable.render("surveyDataTable");
});
</script>

<template>
  <div id="surveyDataTable" />
</template>
```

--------------------------------

### Full Visualization Panel Implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-vue.md

A complete example demonstrating the import of necessary styles, survey model initialization, and Visualization Panel setup within a Vue component.

```html
<script setup lang="ts">
import 'survey-analytics/survey.analytics.css'
import { Model } from 'survey-core'
import { VisualizationPanel } from 'survey-analytics'
import { onMounted } from 'vue'

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

onMounted(() => {
  const survey = new Model(surveyJson);
  const vizPanel = new VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
  );
});
</script>

<template>
</template>
```

--------------------------------

### Full JavaScript implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-html-css-javascript.md

A complete JavaScript example defining the survey model, generating mock data, and rendering the table.

```javascript
const surveyJson = {
    elements: [{
        name: "satisfaction-score",
        title: "How would you describe your experience with our product?",
        type: "radiogroup",
        choices: [
            { value: 5, text: "Fully satisfying" },
            { value: 4, text: "Generally satisfying" },
            { value: 3, text: "Neutral" },
            { value: 2, text: "Rather unsatisfying" },
            { value: 1, text: "Not satisfying at all" }
        ],
        isRequired: true
    }, {
        name: "nps-score",
        title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
        type: "rating",
        rateMin: 0,
        rateMax: 10,
    }],
    completedHtml: "Thank you for your feedback!",
};

const survey = new Survey.Model(surveyJson);

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
    const data = [];
    for (let index = 0; index < 100; index++) {
        const satisfactionScore = randomIntFromInterval(1, 5);
        const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6);
        data.push({
            "satisfaction-score": satisfactionScore,
            "nps-score": npsScore
        });
    }
    return data;
}

const surveyDataTable = new SurveyAnalyticsTabulator.Tabulator(
    survey,
    generateData()
);

document.addEventListener("DOMContentLoaded", function() {
    surveyDataTable.render(document.getElementById("surveyDataTable"));
});
```

--------------------------------

### Install dependencies

Source: https://github.com/surveyjs/survey-analytics/blob/master/README.md

Install required project dependencies using npm.

```bash
npm install
```

--------------------------------

### Full Visualization Panel Implementation in Vue

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-vue.md

Complete example including survey model initialization, data binding, and panel rendering.

```html
<script setup lang="ts">
import 'survey-analytics/survey.analytics.css'
import { Model } from 'survey-core'
import { VisualizationPanel } from 'survey-analytics'
import { onMounted } from "vue"

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

onMounted(() => {
  const survey = new Model(surveyJson);
  const vizPanel = new VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
  );
  vizPanel.render("surveyVizPanel");
});
</script>

<template>
  <div id="surveyVizPanel" />
</template>
```

--------------------------------

### Install Export Dependencies

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-angular.md

Run these commands to install the necessary third-party libraries for PDF and Excel export functionality.

```sh
npm i jspdf@2.4.0 --save
npm i jspdf-autotable@3.5.20 --save
npm i xlsx@0.18.5 --save
```

--------------------------------

### Install survey-analytics and dependencies

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-angular.md

Commands to install the required npm package and Plotly.js type definitions.

```cmd
npm install survey-analytics --save
```

```cmd
npm i @types/plotly.js-dist-min --save-dev
```

--------------------------------

### Full JavaScript Implementation for Analytics

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-html-css-javascript.md

A complete JavaScript example defining survey structure, results, and initializing the Visualization Panel.

```js
const surveyJson = {
    elements: [{
        name: "satisfaction-score",
        title: "How would you describe your experience with our product?",
        type: "radiogroup",
        choices: [
            { value: 5, text: "Fully satisfying" },
            { value: 4, text: "Generally satisfying" },
            { value: 3, text: "Neutral" },
            { value: 2, text: "Rather unsatisfying" },
            { value: 1, text: "Not satisfying at all" }
        ],
        isRequired: true
    }, {
        name: "nps-score",
        title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
        type: "rating",
        rateMin: 0,
        rateMax: 10,
    }],
    completedHtml: "Thank you for your feedback!",
};

const survey = new Survey.Model(surveyJson);

const surveyResults = [{
    "satisfaction-score": 5,
    "nps-score": 10
}, {
    "satisfaction-score": 5,
    "nps-score": 9
}, {
    "satisfaction-score": 3,
    "nps-score": 6
}, {
    "satisfaction-score": 3,
    "nps-score": 6
}, {
    "satisfaction-score": 2,
    "nps-score": 3
}];

const vizPanelOptions = {
    allowHideQuestions: false
}

const vizPanel = new SurveyAnalytics.VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
);
```

--------------------------------

### Install survey-analytics package

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-angular.md

Use npm to install the survey-analytics package and its dependencies.

```sh
npm install survey-analytics --save
```

--------------------------------

### Generate Mock Survey Data

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-react.md

Use this setup to generate sample survey results for testing purposes.

```js
// components/Tabulator.tsx
// ...
const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

function randomIntFromInterval(min: number, max: number): number  {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

interface INpsDataObject {
  "satisfaction-score": number;
  "nps-score": number;
}

function generateData(): Array<INpsDataObject> {
  const data: Array<INpsDataObject> = [];
  for (let index = 0; index < 100; index++) {
    const satisfactionScore = randomIntFromInterval(1, 5);
    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6);
    data.push({
      "satisfaction-score": satisfactionScore,
      "nps-score": npsScore
    });
  }
  return data;
}
```

--------------------------------

### Full HTML Setup for SurveyJS Dashboard

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-html-css-javascript.md

A complete HTML template including necessary scripts and stylesheets for the SurveyJS Analytics library.

```html
<!DOCTYPE html>
<html>
<head>
    <title>SurveyJS Dashboard</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <!-- Uncomment the following lines if you also display the survey on the page -->
    <!-- <link href="https://unpkg.com/survey-core/survey-core.min.css" type="text/css" rel="stylesheet"> -->
    <!-- <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script> -->

    <script src="https://unpkg.com/plotly.js-dist-min/plotly.min.js"></script>

    <link href="https://unpkg.com/survey-analytics/survey.analytics.min.css" rel="stylesheet">
    <script src="https://unpkg.com/survey-analytics/survey.analytics.min.js"></script>

    <script type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>
```

--------------------------------

### Load survey results in Angular

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-angular.md

Example of fetching survey data from a web service within an Angular component.

```js
import { AfterViewInit, Component } from '@angular/core';

const SURVEY_ID = 1;

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  // ...
  ngAfterViewInit(): void {
    loadSurveyResults("https://your-web-service.com/" + SURVEY_ID)
      .then((surveyResults) => {
        // ...
        // Configure and render the Visualization Panel here
        // Refer to the help topics below
        // ...
      });
  }
}

function loadSurveyResults (url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.onload = () => {
      const response = request.response ? JSON.parse(request.response) : [];
      resolve(response);
    }
    request.onerror = () => {
      reject(request.statusText);
    }
    request.send();
  });
}
```

--------------------------------

### LayoutEngine.start()

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/layoutengine.md

Enables the dynamic layout in a given HTML element, arranging visualization items and enabling drag-and-drop functionality.

```APIDOC
## start(container)

### Description
Enables the dynamic layout in a given HTML element. This method arranges visualization items based on the available screen space and allows users to reorder them via drag and drop.

### Parameters
- **container** (HTMLElement) - Required - The HTML element where the layout will be enabled.
```

--------------------------------

### Initialize Visualization Panel with Data

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-html-css-javascript.md

Define the survey model, results, and options, then instantiate and render the VisualizationPanel.

```js
const surveyJson = {
    elements: [{
        name: "satisfaction-score",
        title: "How would you describe your experience with our product?",
        type: "radiogroup",
        choices: [
            { value: 5, text: "Fully satisfying" },
            { value: 4, text: "Generally satisfying" },
            { value: 3, text: "Neutral" },
            { value: 2, text: "Rather unsatisfying" },
            { value: 1, text: "Not satisfying at all" }
        ],
        isRequired: true
    }, {
        name: "nps-score",
        title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
        type: "rating",
        rateMin: 0,
        rateMax: 10,
    }],
    completedHtml: "Thank you for your feedback!",
};

const survey = new Survey.Model(surveyJson);

const surveyResults = [{
    "satisfaction-score": 5,
    "nps-score": 10
}, {
    "satisfaction-score": 5,
    "nps-score": 9
}, {
    "satisfaction-score": 3,
    "nps-score": 6
}, {
    "satisfaction-score": 3,
    "nps-score": 6
}, {
    "satisfaction-score": 2,
    "nps-score": 3
}];

const vizPanelOptions = {
    allowHideQuestions: false
}

const vizPanel = new SurveyAnalytics.VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
);

document.addEventListener("DOMContentLoaded", function() {
    vizPanel.render(document.getElementById("surveyVizPanel"));
});
```

--------------------------------

### Clone the repository

Source: https://github.com/surveyjs/survey-analytics/blob/master/README.md

Initial step to download the source code from GitHub.

```bash
git clone https://github.com/surveyjs/survey-analytics.git
cd survey-analytics
```

--------------------------------

### Build the library

Source: https://github.com/surveyjs/survey-analytics/blob/master/README.md

Compile the library source code into the build folder.

```bash
npm run build
```

--------------------------------

### Run unit tests

Source: https://github.com/surveyjs/survey-analytics/blob/master/README.md

Execute the project's unit test suite.

```bash
npm test
```

--------------------------------

### Import SurveyJS Analytics Styles

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-vue.md

Include the required CSS file within your Vue component's script setup block.

```html
<script setup lang="ts">
import 'survey-analytics/survey.analytics.css'
</script>

<template>
  <!-- ... -->
</template>
```

--------------------------------

### Initialize VisualizationPanel

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/ivisualizationpaneloptions.md

Pass the options object as the third argument to the VisualizationPanel constructor.

```js
import { VisualizationPanel } from "survey-analytics";

const vizPanel = new VisualizationPanel(
  surveyQuestions,
  surveyResults,
  vizPanelOptions
);
```

--------------------------------

### VisualizerBase Constructor

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizerbase.md

Initializes a new instance of the VisualizerBase class.

```APIDOC
## constructor(question, data, options, type)

### Description
Creates a new VisualizerBase instance to represent a survey question's data.

### Parameters
- **question** (Question) - Required - A survey question to visualize.
- **data** (Array<any>) - Required - Survey results.
- **options** (Object) - Required - Configuration object containing dataProvider, renderContent, survey, seriesValues, and seriesLabels.
- **type** (string) - Optional - The visualizer's type.
```

--------------------------------

### Run project test suites and linting

Source: https://github.com/surveyjs/survey-analytics/blob/master/CONTRIBUTING.md

Commands to execute unit tests, functional tests, and lint checks from the project root folder.

```bash
npm run test
```

```bash
npm run testcafe
```

```bash
npm run lint
```

--------------------------------

### Create a visualizer using VisualizerFactory

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizerfactory.md

Instantiates a visualizer for a specific question and renders it into a container element.

```js
import { VisualizerFactory } from "survey-analytics";

const visualizer = new VisualizerFactory.createVisualizer(
  question,
  data,
  options
);

visualizer.render("containerId")
```

--------------------------------

### Configure Flattened Checkbox Tabulators

Source: https://github.com/surveyjs/survey-analytics/blob/master/examples/flattened-checkbox.html

Initializes three different Tabulator configurations to demonstrate default, checkmark-based, and selection-order-based column splitting for checkbox survey elements.

```javascript
// Define the survey JSON
var json = {
  elements: [
    { type: "checkbox", name: "fav_cars", title: "Favorite Cars", choices: [
      { value: "car1", text: "Car 1" },
      { value: "car2", text: "Car 2" },
      { value: "car3", text: "Car 3" }
    ] },
    { type: "text", name: "name", title: "Name" }
  ]
};

// Sample data
var data = [
  { fav_cars: ["car1", "car2"], name: "John Doe" },
  { fav_cars: ["car2"], name: "Jane Smith" },
  { fav_cars: ["car1", "car3"], name: "Bob Johnson" },
  { fav_cars: [], name: "Alice Williams" }
];

var survey = new Survey.SurveyModel(json);

// Create flattened checkbox tabulator with checkmarks (default)
var surveyAnalyticsFlattenedTabulator = new SurveyAnalyticsTabulator.Tabulator(
  survey,
  data,
  { splitMultiSelectIntoColumns: true }
);
surveyAnalyticsFlattenedTabulator.render("tabulatorFlattenedContainer");

// Create flattened checkbox tabulator with selection order
var surveyAnalyticsOrderTabulator = new SurveyAnalyticsTabulator.Tabulator(
  survey,
  data,
  { splitMultiSelectIntoColumns: true, multiSelectColumnValueFormat: "selectionOrder" }
);
surveyAnalyticsOrderTabulator.render("tabulatorOrderContainer");

// Create normal tabulator for comparison
var surveyAnalyticsNormalTabulator = new SurveyAnalyticsTabulator.Tabulator(
  survey,
  data,
  { splitMultiSelectIntoColumns: false }
);
surveyAnalyticsNormalTabulator.render("tabulatorNormalContainer");
```

--------------------------------

### Instantiate the Visualization Panel

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-html-css-javascript.md

Pass the survey questions, results, and configuration object to the VisualizationPanel constructor to create an instance.

```js
const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions = { /* ... */ };

const survey = new Survey.Model(surveyJson);

const vizPanel = new SurveyAnalytics.VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
);
```

--------------------------------

### VisualizationPanel Constructor

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizationpanel.md

Initializes a new instance of the VisualizationPanel class with survey questions, data, and configuration options.

```APIDOC
## new VisualizationPanel(questions, data, vizPanelOptions)

### Description
Creates a new VisualizationPanel instance to visualize survey results.

### Parameters
- **questions** (Array<Question>) - Required - Survey questions to visualize.
- **data** (Array<any>) - Required - Survey results.
- **vizPanelOptions** (IVisualizationPanelOptions) - Required - Visualization Panel configuration.
```

--------------------------------

### Full HTML implementation

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-html-css-javascript.md

A complete HTML structure including necessary scripts, styles, and the container element.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Table View: SurveyJS Dashboard</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>

    <!-- jsPDF for export to PDF -->
    <script type="text/javascript" src="https://unpkg.com/jspdf@2.4.0/dist/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jspdf-autotable@3.5.20/dist/jspdf.plugin.autotable.min.js"></script>
    
    <!-- SheetJS for export to Excel -->
    <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

    <!-- Tabulator -->
    <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>

    <!-- SurveyJS plugin for Tabulator -->
    <link href="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.js"></script>

    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div id="surveyDataTable"></div>
</body>
</html>
```

--------------------------------

### Build project commands

Source: https://github.com/surveyjs/survey-analytics/blob/master/CLAUDE.md

Commands to trigger various build processes including UMD bundles, ESM modules, and type generation.

```bash
npm run build          # full build: build:dev + build:prod (UMD) + rollup -c (esm) + build:types
npm run build:all      # alias for build
npm run build:dev      # UMD dev bundle, emits non-source files + styles
npm run build:prod     # UMD prod bundle
npm run watch:dev      # rollup -w for development
```

--------------------------------

### VisualizerFactory.createVisualizer()

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizerfactory.md

Creates a visualizer instance for a specific survey question using provided data and options.

```APIDOC
## VisualizerFactory.createVisualizer()

### Description
Creates a visualizer for a single question. If a question has multiple registered visualizers, users can switch between them using a drop-down menu.

### Parameters
- **question** (Question) - Required - A question for which to create a visualizer.
- **data** (Array<{ [index: string]: any; }>) - Required - A data array with survey results to be visualized.
- **options** ({ [index: string]: any; }) - Required - An object with any custom properties you need within the visualizer.

### Return Value
- **VisualizerBase** - The created visualizer instance.

### Example
```js
import { VisualizerFactory } from "survey-analytics";

const visualizer = new VisualizerFactory.createVisualizer(
  question,
  data,
  options
);

visualizer.render("containerId")
```
```

--------------------------------

### Configure Visualization Panel Options

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-angular.md

Define the configuration object for the Visualization Panel to control features like question visibility.

```js
const vizPanelOptions = {
  allowHideQuestions: false
}
```

--------------------------------

### IVisualizationPanelOptions Interface

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/ivisualizationpaneloptions.md

Configuration options for the VisualizationPanel constructor.

```APIDOC
## IVisualizationPanelOptions

### Description
Configuration object passed to the `VisualizationPanel` constructor to customize the behavior and UI features of the survey data dashboard.

### Properties
- **allowChangeVisualizerType** (boolean) - Optional - Allows users to switch between different visualizer types. Default: true.
- **allowDragDrop** (boolean) - Optional - Specifies whether users can drag and drop charts. Applies only if allowDynamicLayout is true. Default: true.
- **allowDynamicLayout** (boolean) - Optional - Specifies whether to arrange charts based on available screen space and allow reordering. Default: true.
- **allowHideEmptyAnswers** (boolean) - Optional - Allows users to hide answers with zero count in supported charts. Default: false.
- **allowHideQuestions** (boolean) - Optional - Allows users to change the visibility of individual charts. Default: true.
- **allowSelection** (boolean) - Optional - Allows users to cross-filter charts by selecting series points. Default: true.
- **allowShowMissingAnswers** (boolean) - Optional - Allows users to show the number of respondents who did not answer a question. Default: false.
- **allowShowPercentages** (boolean) - Optional - Allows users to switch between absolute and percentage values in bar charts. Default: false.
- **allowSortAnswers** (boolean) - Optional - Allows users to sort answers by answer count. Default: true.
- **allowTopNAnswers** (boolean) - Optional - Allows users to select whether to show top 5, 10, or 20 answers. Default: false.
- **allowTransposeData** (boolean) - Optional - Allows users to transpose a visualized matrix question. Default: false.
```

--------------------------------

### Instantiate Visualization Panel in React

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-react.md

Initialize the VisualizationPanel within a React component using survey questions and results. Ensure the instance is stored in state for rendering.

```js
// components/Dashboard.tsx
// ...
import { useState } from 'react';
import { Model } from 'survey-core';
import { IVisualizationPanelOptions, VisualizationPanel } from 'survey-analytics';

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions: IVisualizationPanelOptions = { /* ... */ };

export default function DashboardComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [vizPanel, setVizPanel] = useState<VisualizationPanel>();
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }

  if (!vizPanel && !!survey) {
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
    setVizPanel(vizPanel);
  }

  return "...";
}
```

--------------------------------

### render()

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizerbase.md

Renders the visualizer in a specified container.

```APIDOC
## render()

### Description
Renders the visualizer in a specified container.

### Parameters
- **targetElement** (any) - Required - An HTMLElement or an id of a page element in which you want to render the visualizer.
```

--------------------------------

### Unit test commands

Source: https://github.com/surveyjs/survey-analytics/blob/master/CLAUDE.md

Commands for running unit tests using Vitest and jsdom.

```bash
npm run test                      # all unit tests (vitest run)
npm run test:dev                  # watch mode
npm run test:debug                # --inspect-brk, no parallelism
npx vitest run tests/<file>.test.ts
npx vitest run -t "test name"
```

--------------------------------

### Instantiate Visualization Panel in Angular

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-angular.md

Initialize the VisualizationPanel within the ngAfterViewInit lifecycle hook of an Angular component.

```typescript
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { VisualizationPanel } from 'survey-analytics';

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions = { /* ... */ };

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
  }
}
```

--------------------------------

### Configure Table View Styles

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-react.md

Import the required CSS files in your React component.

```js
// components/Tabulator.tsx
import 'tabulator-tables/dist/css/tabulator.css';
import 'survey-analytics/survey.analytics.tabulator.css';
```

--------------------------------

### getState()

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/api-reference/visualizerbase.md

Returns an object with properties that describe a current visualizer state.

```APIDOC
## getState()

### Description
Returns an object with properties that describe a current visualizer state. The properties are different for each individual visualizer.

### Return Value
- **any** - The current state object.
```

--------------------------------

### Instantiate the Tabulator component

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-html-css-javascript.md

Create a new Tabulator instance by passing the survey model and survey results to the constructor.

```javascript
const surveyJson = { /* ... */ };
function generateData() { /* ... */ }

const survey = new Survey.Model(surveyJson);

const surveyDataTable = new SurveyAnalyticsTabulator.Tabulator(
    survey,
    generateData()
);
```

--------------------------------

### Instantiate Visualization Panel in Vue

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-vue.md

Use the VisualizationPanel constructor within the onMounted hook to initialize the component with survey questions, results, and configuration options.

```html
<script setup lang="ts">
// ...
import { Model } from 'survey-core'
import { VisualizationPanel } from 'survey-analytics'

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions = { /* ... */ };

onMounted(() => {
  const survey = new Model(surveyJson);
  const vizPanel = new VisualizationPanel(
    survey.getAllQuestions(),
    surveyResults,
    vizPanelOptions
  );
});
</script>
```

--------------------------------

### Reference SurveyJS Dashboard and Dependencies

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-html-css-javascript.md

Include the required SurveyJS, Tabulator, and export library scripts and stylesheets in the HTML head section.

```html
<head>
    <!-- ... -->
    <!-- SurveyJS Form Library resources -->
    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <!-- Uncomment the following lines if you also display the survey on the page -->
    <!-- <link href="https://unpkg.com/survey-core/survey-core.min.css" type="text/css" rel="stylesheet"> -->
    <!-- <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script> -->

    <!-- jsPDF for export to PDF -->
    <script type="text/javascript" src="https://unpkg.com/jspdf@2.4.0/dist/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jspdf-autotable@3.5.20/dist/jspdf.plugin.autotable.min.js"></script>
    
    <!-- SheetJS for export to Excel -->
    <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

    <!-- Tabulator -->
    <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>

    <!-- SurveyJS plugin for Tabulator -->
    <link href="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.js"></script>

    <script type="text/javascript" src="index.js"></script>
</head>
```

--------------------------------

### Linting commands

Source: https://github.com/surveyjs/survey-analytics/blob/master/CLAUDE.md

Commands to run ESLint and apply automatic fixes.

```bash
npm run lint           # eslint, --ext .js,.cjs,.mjs,.ts,.cts,.mts --max-warnings=0
npm run lint:fix
```

--------------------------------

### Render Visualization Panel in Vue Template

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/get-started-vue.md

Basic implementation showing the container element and the render call within the onMounted lifecycle hook.

```html
<script setup lang="ts">
// ...
onMounted(() => {
  // ...
  vizPanel.render("surveyVizPanel");
});
</script>

<template>
  <div id="surveyVizPanel" />
</template>
```

--------------------------------

### Create the Tabulator component

Source: https://github.com/surveyjs/survey-analytics/blob/master/docs/set-up-table-view-react.md

Defines a React component that initializes the Tabulator instance with survey results and renders it to a DOM element.

```js
// components/Tabulator.tsx
'use client'

import 'tabulator-tables/dist/css/tabulator.css';
import 'survey-analytics/survey.analytics.tabulator.css';
import { useState, useEffect } from 'react';
import { Model } from 'survey-core';
import { Tabulator } from 'survey-analytics/survey.analytics.tabulator';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

function randomIntFromInterval(min: number, max: number): number  {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

interface INpsDataObject {
  "satisfaction-score": number;
  "nps-score": number;
}

function generateData(): Array<INpsDataObject> {
  const data: Array<INpsDataObject> = [];
  for (let index = 0; index < 100; index++) {
    const satisfactionScore = randomIntFromInterval(1, 5);
    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6);
    data.push({
      "satisfaction-score": satisfactionScore,
      "nps-score": npsScore
    });
  }
  return data;
}

export default function TableViewComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [surveyDataTable, setSurveyDataTable] = useState<Tabulator>();
  const [surveyResults, setSurveyResults] = useState<Array<INpsDataObject>>(generateData());
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }
  if (!surveyResults) {
    setSurveyResults(generateData());
  }

  if (!surveyDataTable && !!survey) {
    const surveyDataTable = new Tabulator(
      survey,
      surveyResults
    );
    setSurveyDataTable(surveyDataTable);
  }

  useEffect(() => {
    surveyDataTable?.render("surveyDataTable");
    return () => {
      document.getElementById("surveyDataTable")!.innerHTML = "";
    }
  }, [surveyDataTable]);

  return (
    <div id="surveyDataTable" />
  );
}
```
Tokens:
Raw