Implement a Custom Data Visualizer

A data visualizer is a dashboard UI element that creates a visual representation of form field data. SurveyJS Dashboard ships with a set of built-in data visualizers, including bar charts, pie charts, gauges, word cloud, and other diagrams. If none of them suit your use case, you can create a custom data visualizer. In this demo, we create a custom visualizer that displays matrix data as a table, and another one that calculates average highest and lowest values for a Multiple Textboxes question.

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, custom visualizers are based on built-in VisualizerBase and Matrix visualizers. These visualizers already calculate values and return them in a suitable format. We only need to implement custom rendering functions that would display these values as required.

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

1. Implement a rendering function.
   Within this function, configure the HTML markup that the visualizer should render.

2. Instantiate the visualizer.
   Create an instance of a built-in visualizer (VisualizerBase and Matrix in this example). Pass the question to be visualized, survey results, rendering function, and your visualizer's name to the constructor.

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

4. 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 data provider, view the following demo:

Visualize Text Entry Questions as Charts