Visualize Text Entry Questions as Charts

Text entry questions accept open short answers that are saved in survey results as string values. SurveyJS Dashboard visualizes text entry questions as a word cloud or a table, but you can implement a custom data visualizer. In this demo, a custom visualizer counts textual answers (zip codes) and displays this data as a bar or pie chart.

Any data visualizer consists of two parts: a data provider, which calculates data to be displayed, and a rendering function, which displays the data. When you implement a custom data visualizer, you should base it on a built-in visualizer, but replace one or both of these parts depending on your task. In this example, a custom visualizer is based on a built-in SelectBasePlotly visualizer. SelectBasePlotly already can visualize data as bar, pie, and doughnut charts. We only need to implement a custom data provider that would calculate values and format them as required by SelectBasePlotly.

To create a data visualizer with a custom data provider, follow the steps below:

1. Implement a function that calculates data.
   To be used with SelectBasePlotly, this function should count the answers and return an array of count values. This array should have the same sort order as the array of answers. Assign this function to the getDataCore property of a DataProvider object. Then, assign this object to the options.dataProvider property to replace the default data provider.

2. Instantiate the visualizer.
   Create an instance of the SelectBasePlotly visualizer. Pass the question to be visualized, survey results, visualizer options with a replaced data provider, and your visualizer's name to the constructor.

3. Implement functions that return visualized answers and their display names.
   A visualizer must implement the getValues and getLabels functions. getValues should return an array of answers, getLabels—an array of display names. You can customize the arrays within these functions if required. In this example, both functions simply return the answer array.

4. Register the visualizer.
   Use the VisualizationManager.registerVisualizer(questionType, constructor, index) method to register your custom visualizer for use with a required question type.

5. Specify the visualizer's display name.
   This name will be displayed in the chart drop-down list. Use localization capabilities for this step.

Refer to the code listing and find comments that mark sections of code corresponding to each step.

If you are looking for information on how to create a data visualizer with a custom rendering function, view the following demos:

Implement a Custom Data Visualizer

Bar Chart for Poll Data