# requestHandler

**URL:** <https://discuss.elastic.co/t/requesthandler/177325>\
**Category:** Kibana\
**Created:** [April 17, 2019, 2:56pm UTC](https://discuss.elastic.co/t/requesthandler/177325 "2019-04-17T14:56:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\
**Post date:** [April 17, 2019, 2:56pm UTC](https://discuss.elastic.co/t/requesthandler/177325/1 "2019-04-17T14:56:30Z")

</div>

hi team,  
Writing custom visualizations , so please guide where can i find any examples of **requestHandler** of **VisFactory.createReactVisualization**? my task is to receive data from elastic and visualize it with my custom view.

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [April 17, 2019, 3:01pm UTC](https://discuss.elastic.co/t/requesthandler/177325/2 "2019-04-17T15:01:25Z")

</div>

Hi

Request handler gets called when one of the following keys on AppState change: `vis` , `query` , `filters` or `uiState` and when timepicker is updated. On top of that it will also get called on force refresh.

By default visualizations will use the `courier` request handler. They can also choose to use any of the other provided request handlers. It is also possible to define your own request handler (which you can then register to be used by other visualizations). Have you looked at this detailed documentation? [https://github.com/elastic/kibana/blob/master/docs/development/visualize/development-create-visualization.asciidoc#development-visualization-request-handlers](https://github.com/elastic/kibana/blob/master/docs/development/visualize/development-create-visualization.asciidoc#development-visualization-request-handlers)

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\
**Post date:** [April 17, 2019, 3:11pm UTC](https://discuss.elastic.co/t/requesthandler/177325/3 "2019-04-17T15:11:55Z")

</div>

[rashmi](https://discuss.elastic.co/u/rashmi), sure i have seen it, but still cant understand how it works. are there any simple workable example with functionality like getting data from elastic indexes and passing it to visualize in somebody`s custom view ?

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [April 17, 2019, 4:49pm UTC](https://discuss.elastic.co/t/requesthandler/177325/4 "2019-04-17T16:49:50Z")

</div>

@lukeelmers will shed more light here.

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [April 17, 2019, 5:06pm UTC](https://discuss.elastic.co/t/requesthandler/177325/5 "2019-04-17T17:06:05Z")

</div>

Hi @masterThomas,

A simple setup of a React visualization might look something like this (where `ReactComponent` is the component you've created for rendering the visualization):

```auto
  import { VisFactoryProvider } from 'ui/vis/vis_factory';
  import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
  import { ReactComponent } from './my_react_component';
  import { ReactOptionsComponent } from './my_react_options_component';

  const MyNewVisType = (Private) => {
    const VisFactory = Private(VisFactoryProvider);
    return VisFactory.createReactVisualization({
      name: 'my_new_vis',
      title: 'My New Vis',
      icon: 'my_icon',
      description: 'Cool new chart',
      visConfig: {
        component: ReactComponent
      },
      editorConfig: {
        optionsTemplate: ReactOptionsComponent
      }
    });
  };

  VisTypesRegistryProvider.register(MyNewVisType);

```

By not explicitly specifying a request or response handler, you will by default get the data passed to the props of `ReactComponent` in "tabify" format which you can find [more info & examples of here](https://www.elastic.co/blog/kibana-plugin-api-changes-in-6-5).

If you are looking for a more complete example, I'd recommend looking at something like the [markdown visualization](https://github.com/elastic/kibana/tree/4aa2a4c05f128f09e113d29f8a31557c1875717f/src/legacy/core_plugins/markdown_vis) in Kibana's source. This is a relatively simple visualization implemented in React.

Hope that helps point you in the right direction!

---

<div class="post-metadata">

**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\
**Post date:** [April 18, 2019, 11:23am UTC](https://discuss.elastic.co/t/requesthandler/177325/6 "2019-04-18T11:23:56Z")

</div>

Hi @lukeelmers, thanks for answers. So i put the requestHandler in courier, but has issue then :

```
Error in visualization

flatData.index is undefined

```

what is that meaning? i tried to pull out data from elastic to my view.  
Also, markdown does not meet my requirements because it does not send any requests and does not fetch data then and i need some example which more or less has that logic . where can i find it ?

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [April 18, 2019, 9:12pm UTC](https://discuss.elastic.co/t/requesthandler/177325/7 "2019-04-18T21:12:41Z")

</div>

Sounds like perhaps an index pattern isn't selected for your visualization. I assume you haven't changed `options.showIndexSelection` from the default when using the [visualization factory](https://www.elastic.co/guide/en/kibana/current/development-visualization-factory.html)?

Although markdown isn't handling aggregations, it is still representative of how data is passed into a visualization. I'd recommend checking out the docs on the [default vis editor](https://www.elastic.co/guide/en/kibana/current/development-vis-editors.html) as a starting point -- if you correctly configure the editor, it will handle requesting bucket aggs for you, passing the data along to your vis component similar to how it is passed to the markdown component.

Another example you might look at is [tagcloud](https://github.com/elastic/kibana/tree/4aa2a4c05f128f09e113d29f8a31557c1875717f/src/legacy/core_plugins/tagcloud) -- the editor params still use angular in this case, but this will give an example of usage with bucket aggs.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 16, 2019, 9:19pm UTC](https://discuss.elastic.co/t/requesthandler/177325/8 "2019-05-16T21:19:00Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.