Add SurveyJS Dashboard to an Angular Application

This tutorial explains how to integrate SurveyJS Dashboard into an Angular application and visualize survey results. Follow the steps below to set up and render a dashboard:

• Install the survey-analytics npm Package
• Configure Styles
• Load Survey Results
• Configure the Dashboard
• Render the Dashboard
• Activate a SurveyJS License

The final result is an interactive dashboard similar to the one shown below:

View Full Code on GitHub

If you need a preconfigured starter project with all SurveyJS components, refer to the following repository: SurveyJS + Angular CLI Quickstart Template.

SurveyJS Dashboard is distributed as the survey-analytics npm package. Install it using the following command:

npm install survey-analytics --save

SurveyJS Dashboard uses the Chart.js library for data visualization. This dependency is installed automatically.

Open the angular.json file and add the SurveyJS Dashboard stylesheet to the styles array:

"styles": [
  "src/styles.css",
  "node_modules/survey-analytics/survey.analytics.min.css"
]

Survey results are typically collected in the SurveyModel's onComplete event handler and stored on your server. For more information, refer to the Handle Form Completion help topic.

To retrieve results, send a request to your backend and return an array of JSON objects:

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

const SURVEY_ID = 1;

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  // ...
  async ngAfterViewInit(): Promise<void> {
    try {
      const surveyResults = await loadSurveyResults(
        `https://your-web-service.com/${SURVEY_ID}`
      );

      // ...
      // Configure and render the Dashboard here
      // Refer to the section below
      // ...
    } catch (error) {
      console.error('Failed to load survey results:', error);
    }
  }
}

function loadSurveyResults(url: string): Promise<any[]> {
  return fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
      return response.json();
    })
    .catch((error) => {
      throw new Error(error.message || 'Network error');
    });
}

For demonstration purposes, this tutorial uses predefined survey results:

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 }
];

Pass an IDashboardOptions object to the Dashboard constructor to configure the dashboard.

Specify the data array to provide survey results. You can then either auto-generate dashboard items based on survey questions or define them manually.

To generate dashboard items automatically, assign survey questions to the questions property. Use the SurveyModel's getAllQuestions() method to retrieve them.

Each generated item inherits the question's name and title. The Dashboard also automatically selects a suitable visualization type and populates the list of available alternative types (availableTypes) that users can switch between.

Use the items array to control which items appear and override their configuration. This array can include question names and full configuration objects. When you specify a configuration object, it is merged with the auto-generated settings.

The following example uses the items array to set the default NPS visualization type for the nps-score question:

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

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

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const dashboard = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });
  }
}

import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { Dashboard } 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 }
];

@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 dashboard = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });
  }
}

If your dashboard is not based on a survey schema, configure all items explicitly. Populate the items array with IDashboardItemOptions objects. Use the name property to bind each item to a data field.

import { AfterViewInit, Component } from '@angular/core';
import { Dashboard } from 'survey-analytics';

const surveyResults = [ /* ... */ ];

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const dashboard = new Dashboard({
      data: surveyResults,
      items: [
        {
          name: "satisfaction-score",
          type: "bar",
          title: "CSAT",
          availableTypes: [ "bar", "vbar", "pie", "gauge" ]
        },
        {
          name: "nps-score",
          type: "nps",
          title: "NPS Score",
          allowChangeType: false
        }
      ]
    });
  }
}

import { AfterViewInit, Component } from '@angular/core';
import { Dashboard } from 'survey-analytics';

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 }
];

@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 dashboard = new Dashboard({
      data: surveyResults,
      items: [
        {
          name: "satisfaction-score",
          type: "bar",
          title: "CSAT",
          availableTypes: [ "bar", "vbar", "pie", "gauge" ]
        },
        {
          name: "nps-score",
          type: "nps",
          title: "NPS Score",
          allowChangeType: false
        }
      ]
    });
  }
}

Add a container element to the component template:

<div id="dashboard"></div>

Call the render(containerId) method on the Dashboard instance you configured to mount the dashboard:

// ...
@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // ...
    dashboard.render("dashboard");
  }
}

Run the application with ng serve and open http://localhost:4200/ in your browser.

<div id="dashboard"></div>

import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { Dashboard } 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 }
];

@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 dashboard = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });
    dashboard.render("dashboard");
  }
}

View Full Code on GitHub

SurveyJS Dashboard is not available for free commercial use. To integrate it into your application, you must purchase a commercial license for the software developer(s) who will be working with the Dashboard APIs and implementing the integration. If you use SurveyJS Dashboard without a license, an alert banner will appear at the top of the interface:

After purchasing a license, follow the steps below to activate it and remove the alert banner:

1. Log in to the SurveyJS website using your email address and password. If you've forgotten your password, request a reset and check your inbox for the reset link.
2. Open the following page: How to Remove the Alert Banner. You can also access it by clicking Set up your license key in the alert banner itself.
3. Follow the instructions on that page.

Once you've completed the setup correctly, the alert banner will no longer appear.

Dashboard Demo Examples