Buy Licenses Contact Support Login/Register
v 1.7.18
v 1.7.18
Overview Examples Docs Source Download

Analytics Library for SurveyJS

SurveyJS Analytics library allows to render survey results
as charts or tables

Features

  • Count answers and render results as charts for the select type questions
  • Count answers and render results as gauge for range type question
  • Three different types of charts: bar, pie and line
  • Wordcloud for text questions representation
  • Interactive filtering for the select type questions
  • Flexible layout and customizable colors

Screenshots

SurveyJS Analytics example page 1 SurveyJS Analytics example page 2

Usage (modern ES, modules)


Usage (ES5, scripts)

Add these scripts to your web page


    <link rel="stylesheet" type="text/css" href="../packages/survey.analytics.css" />

    <script src="https://cdn.rawgit.com/inexorabletash/polyfill/master/typedarray.js"></script>

    <script src="https://polyfill.io/v3/polyfill.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/c3@0.7.1/c3.css" />

    <script src="https://unpkg.com/d3@5.9.2/dist/d3.min.js"></script>
    <script src="https://unpkg.com/c3@0.7.1/c3.js"></script>

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

    <script src="https://unpkg.com/wordcloud@1.1.0/src/wordcloud2.js"></script>

    <script src="../node_modules/survey-core/survey.core.js"></script>
    <script src="../packages/survey.analytics.js"></script>

var surveyId = "your survey Id";
var accessKey = "your access key";

var survey = new Survey.SurveyModel({ surveyId: surveyId });

var xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "http://surveyjs.io/api/MySurveys/getSurveyResults/" +
    surveyId +
    "?accessKey=" +
    accessKey
);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function() {
  var result = xhr.response ? JSON.parse(xhr.response) : [];

  var normalizedData = result.Data.map(function(item) {
    survey.getAllQuestions().forEach(function(q) {
      if (item[q.name] === undefined) {
        item[q.name] = "";
      }
    });
    return item;
  });

  var visPanel = new SurveyAnalytics.VisualizationPanel(
    document.getElementById("summaryContainer"),
    survey.getAllQuestions(),
    normalizedData
  );
  visPanel.showHeader = true;
  visPanel.render();
};
xhr.send();

Please check the following setting in your "tsconfig.json" file (this setting is need for used charting library):

    "module": "es2015",

Examples

Constraints

  • Wisualization for custom widgets is not implemented

License

Commercial