Implement a Custom Data Visualizer

Edit in →

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...

Sorry, we can't retrieve the data from server. Please comeback later.

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:

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

  2. 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 use VisualizerBase and Matrix. 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.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.