Visualization Response Handlersedit

The response handler is a function that receives the data from a request handler, as well as an instance of Vis object. Its job is to convert the data to a format visualization can use. By default default request handler is used which produces a table representation of the data. The data object will then be passed to visualization. This response matches the visData property of the <visualization> directive.

default response handleredit

The default response handler converts pure elasticsearch responses into a tabular format. It is the recommended responseHandler. The response object contains a table property, which is an array of all the tables in the response. Each of the table objects has two properties:

  • columns: array of column objects, where each column object has a title property and an aggConfig property
  • rows: array of rows, where each row is an array of non formatted cell values

Here is an example of a response with 1 table, 3 columns and 2 rows:

  tables: [{
    columns: [{
      title: 'column1',
      aggConfig: ...
      title: 'column2',
      aggConfig: ...
      title: 'column3',
      aggConfig: ...
    rows: [
      [ '404', 1262, 12.5 ]
      [ '200', 343546, 60.1 ]

none response handleredit

None response handler is an identity function, which will return the same data it receives.

custom response handleredit

You can define your custom response handler by providing a function with the following definition: function (vis, response) { … }.

Function should return the transformed data object that visualization can consume.

import { VisFactoryProvider } from 'ui/vis/vis_factory';

const myResponseHandler = (vis, response) => {
   // transform the response (based on vis object?)
   const resposne = ... transform data ...;
   return response;

const MyNewVisType(Private) => {
  const VisFactory = Private(VisFactoryProvider);

  return VisFactory.createAngularVisualization({
    name: 'my_new_vis',
    title: 'My New Vis',
    icon: 'my_icon',
    description: 'Cool new chart',
    responseHandler: myResponseHandler