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

Show text question answers as chart

Show text question answers as chart via a custom visualizer.

loading...

                        


    
        var json = {
  "elements": [
    {
      "type": "text",
      "inputType": "text",
      "name": "zipcode",
      "title": "Postal code"
    }
  ]
};
    
function CustomVisualizer(question, data, options) {
  var values = [];

  var dataProvider = new SurveyAnalytics.DataProvider(data);

  dataProvider.getDataCore = function (visualizer) {
    var result = {};
    this.filteredData.forEach(function (row) {
      var rowValue = row[visualizer.question.name];
      if (rowValue !== undefined) {
        if(result[rowValue] === undefined) {
          result[rowValue] = 1;
        } else {
          result[rowValue]++;
        }
      }
    });

    values.push.apply(values, Object.keys(result));
    return [values.map(function(value) { return result[value]; })];
  };

  options.dataProvider = dataProvider;
  var visualizer = new SurveyAnalytics.SelectBasePlotly(
    question,
    data,
    options,
    "textChartVisualizer"
  );
  visualizer.getValues = function () { return values; };
  visualizer.getLabels = function () { return values; };

  return visualizer;
}

// Unregister other visualizers for the "text" question type
SurveyAnalytics.VisualizationManager.unregisterVisualizer(
  "text",
  SurveyAnalytics.WordCloud
);
SurveyAnalytics.VisualizationManager.unregisterVisualizer(
  "text",
  SurveyAnalytics.Text
);
// Register custom visualizer for the given question type
SurveyAnalytics.VisualizationManager.registerVisualizer(
  "text",
  CustomVisualizer
);
// Set localized title of this visualizer
SurveyAnalytics.localization.locales["en"]["visualizer_textChartVisualizer"] =
  "Text as Chart";

var survey = new Survey.Model(json);
var allQuestions = survey.getAllQuestions();

var panelNode = document.getElementById("vizPanel");
panelNode.innerHTML = "";

var data = [
  { zipcode: "000001" }, { zipcode: "100001" }, { zipcode: "500001" }, { zipcode: "000001" }, { zipcode: "500001" }, { zipcode: "000001" }
];

var options = {
    labelTruncateLength: 27,
    allowTopNAnswers: true,
    hideEmptyAnswers: true,
    answersOrder: 'desc',
    showPercentages: true
};

var visPanel = new SurveyAnalytics.VisualizationPanel(
    allQuestions,
    data,
    options
);
visPanel.showHeader = true;
visPanel.render(panelNode);
$("#loadingIndicator").hide();

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Show text question answers as chart via a custom visualizer., jQuery Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.8.10/survey.jquery.min.js"></script>
    <link rel="stylesheet" href="./index.css">
        <link href="https://surveyjs.azureedge.net/1.8.10/survey.analytics.min.css" rel="stylesheet" />
        <script src="https://surveyjs.azureedge.net/1.8.10/survey.analytics.min.js"></script>

</head>
<body>
    
<div id="loadingIndicator">
    <span>
        <div id="loading"><strong>loading...</strong><span></span></div>
    </span>
</div>
<div id="vizPanel"></div>
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>