How to create new visualization types in Redash?


#1

How can anyone contribute a new visualization type?

If this could be somewhat streamlined there could be potentially a good repository of additional visualization options.

In my case I need to have a more flexible mapping viewer, that supports my own polygons to color according to queries results. We could use esri, wms, mapbox, google, etc… Each has its own set of config parameters, and js api.


#2

The end goal is to have a plugin based visualizaiton system, so you can add visualizations without changing your Redash deployment.

Until then, you can add new visualization by extending the current code base. Redash uses Angular to build the UI, so to create a new visualization you need to create two directives (components): render directive that “draws” the visualization and editor directive that takes user configuration for this visualization. Then you register them with the visualization system and Redash takes the rest.

A “blueprint” for a visualization would be:

(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
      });
    }
  ]);
})();

I’m going to create a new visualization soon, and will post the pull request link here for reference. Also will be happy to answer questions if anything isn’t clear, so we can later use this in the documentation for other who would like to create new visualizations.


#3

Here’s the pull request for the new visualization: https://github.com/getredash/redash/pull/1213


#4

very impressive - clean and simple. when i get something done i’ll try to make it “presentable”…