WARNING: Version 6.0 of Kibana has passed its EOL date.
This documentation is no longer being maintained and may be removed. If you are running this version, we strongly advise you to upgrade. For the latest information, see the current release documentation.
Visualization Response Handlers
editVisualization Response Handlers
editThe 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 handler
editThe 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 handler
editNone response handler is an identity function, which will return the same data it receives.
custom response handler
editYou 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 }); } VisTypesRegistryProvider.register(MyNewVisType);