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. Read more...
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.
To create a custom data visualizer, follow the steps below:
Implement a rendering function.
Within this function, configure the HTML markup that the visualizer should render.Instantiate the visualizer.
Your custom visualizer should be based on one of the built-in visualizers but with the rendering function replaced. Create an instance of one of the built-in visualizers. In this demo, we useVisualizerBase
andMatrix
. Pass the question to be visualized, survey results, rendering function, and your visualizer's name to the constructor.Register the visualizer.
Use theVisualizationManager.registerVisualizer(questionType, constructor)
method to register your custom visualizer for use with a required question type.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.