Add SurveyJS Dashboard to a JavaScript Application

This tutorial explains how to integrate SurveyJS Dashboard into an application built with HTML, CSS, and JavaScript (without frontend frameworks). Follow the steps below to set up and render a dashboard:

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

View Live Example

View Full Code on GitHub

Link Resources

SurveyJS Dashboard depends on other JavaScript libraries. Reference them on your page in the following order:

  1. Survey Core
    A platform-independent part of SurveyJS Form Library that works with the survey model. SurveyJS Dashboard requires only this part, but if you also display the survey on the page, reference the rest of the SurveyJS Form Library resources as well.

  2. Chart.js
    A third-party library used to render charts.

  3. SurveyJS Dashboard
    A library that integrates Survey Core with Chart.js.

The following code shows how to reference these libraries:

<head>
  <!-- Survey Core -->
  <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>

  <!-- Optional: Survey UI -->
  <!-- <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> -->

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>

  <!-- SurveyJS Dashboard -->
  <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>
</head>

Load Survey Results

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:

const SURVEY_ID = 1;

loadSurveyResults(`https://your-web-service.com/${SURVEY_ID}`)
  .then((surveyResults) => {
    // ...
    // Configure and render the Dashboard here
    // Refer to the section below
    // ...
  });

function loadSurveyResults(url) {
  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 }
];

Configure the Dashboard

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.

Auto-Generate Dashboard Items

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:

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

const survey = new Survey.Model(surveyJson);

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

  <!-- Optional: Survey UI -->
  <!-- <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://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.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>

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

Configure Dashboard Items Manually

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.

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

const survey = new Survey.Model(surveyJson);

const dashboard = new SurveyAnalytics.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
    }
  ]
});
View Full Code 
<!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>

  <!-- Optional: Survey UI -->
  <!-- <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://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.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>

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 dashboard = new SurveyAnalytics.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
    }
  ]
});

Render the Dashboard

Add a container element to your HTML page:

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

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

document.addEventListener("DOMContentLoaded", function() {
  dashboard.render(document.getElementById("dashboard"));
});
View Full Code 
<!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>

  <!-- Optional: Survey UI -->
  <!-- <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://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.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>
  <div id="dashboard"></div>
</body>
</html>

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

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

View Full Code on GitHub

Activate a SurveyJS License

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:

SurveyJS Dashboard: Alert banner

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.

See Also

Dashboard Demo Examples

Send feedback to the SurveyJS team

Need help? Visit our support page

Submit
Submit Submit
OK OK

Your cookie settings

We use cookies to make your browsing experience more convenient and personal. Some cookies are essential, while others help us analyse traffic. Your personal data and cookies may be used for ad personalization. By clicking “Accept All”, you consent to the use of all cookies as described in our Terms of Use and Privacy Statement. You can manage your preferences in “Cookie settings.”

Accept All
Cookie Settings

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later