Visualizations

Content of this post: https://discuss.redash.io/t/how-to-create-new-visualization-types-in-redash/86

This guide describes how to add a new visualization type to the application. This guide will be using React for the examples.

1. Recognize the Components of a Visualization

Each visualization in The Application consists of:

• Renderer component: It's responsible for "drawing" the visualization based on the data and settings given.

• Editor component: It takes the user configuration for the visualization.

2. Create the React Components for Your Visualization

After getting familiar with how visualizations work in the Application, you can start creating the React components for your new visualization type. This step requires knowledge of React and JavaScript. Here's a simple blueprint for creating a visualization in Angular. Note that the principles remain the same for React:

(function() {
  'use strict';

  var module = angular.module('redash.visualization');

  module.directive('exampleRenderer', function() {
    return {
      restrict: 'E',
      templateUrl: '/views/visualizations/example.html',
      link: function($scope, elm, attrs) {
        var refreshData = function() {
          var queryData = $scope.queryResult.getData();
          if (queryData) {
            // do the render logic.
          }
        };

        $scope.$watch("visualization.options", refreshData, true);
        $scope.$watch("queryResult && queryResult.getData()", refreshData);
      }
    }
  });

  module.directive('exampleEditor', function() {
    return {
      restrict: 'E',
      templateUrl: '/views/visualizations/example_editor.html'
    }
  });

  module.config(['VisualizationProvider', function(VisualizationProvider) {
      var renderTemplate =
        '<example-renderer options="visualization.options" query-result="queryResult"></example-renderer>';

      var editTemplate = '<example-editor></example-editor>';
      var defaultOptions = {
        //
      };

      VisualizationProvider.registerVisualization({
        type: 'EXAMPLE',
        name: 'Example',
        renderTemplate: renderTemplate,
        editorTemplate: editTemplate,
        defaultOptions: defaultOptions
      });
    }
  ]);
})();

3. Register Your Visualization with The Application

After creating the Renderer and Editor components, register them with the application's visualization system. During registration, provide a type and name for your visualization and specify the Renderer and Editor components to use.

4. Test Your New Visualization

Test your new visualization before integrating it into the application. Ensure it works correctly with different data inputs and user settings, and that it integrates well with the rest of the application.

5. Integrate Your New Visualization into The Application

Once you're satisfied with your new visualization, you can integrate it into the application. This typically involves merging your changes into the main codebase.

6. Note on Heatmap Visualization

When creating a heatmap, you might run into some issues with the time format. In such a case, consider pre-processing your data to ensure that the heatmap can correctly interpret the date and time values.

If you continue to face difficulties, you could try using a simple number format for hours (0, 1, 2, 3, etc.), as it appears that heat-maps work well with this setup.

Please adhere to the contribution guidelines and code of conduct of the application when adding new features.