# Visualizations

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:

```javascript
(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.&#x20;

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

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.inverse.watch/admin-and-dev-guide/visualizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.