# Plugin for custom visualization based on hits

**URL:** <https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892>\
**Category:** Kibana\
**Created:** [April 27, 2018, 9:36pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892 "2018-04-27T21:36:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marlen](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Marlen](https://discuss.elastic.co/u/Marlen)\
**Post date:** [April 27, 2018, 9:36pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/1 "2018-04-27T21:36:47Z")

</div>

Hi, I'm trying to create some custom visualizations by developing kibana plugins, for example, one of them is for displaying a cumulative sum of uptime and downtime over the time, the sum should restart whenever I see a change from up to down or vice versa. To calculate that I need to use all of the records, so I need to get somehow the hits part of ES response instead of the aggs part inside my plugin, is that possible?

An alternative that I'm using is Terms aggregation on @timestamp and Terms aggregation on the other fields that I'm insterested in, but that way I'm limiting the number of records to bucket size parameter, is there a way to set the bucket size parameter to null or to remove the size parameter from my plugin so I can get all of the buckets with no limit?

Thanks,

Marlen

---

<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 30, 2018, 4:30pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/2 "2018-04-30T16:30:32Z")

</div>

Since, I don't want to give a half baked answer, am redirecting this question to our Visualization team cc / @thomasneirynck

He will get to your q when he finds some time .

Cheers  
Rashmi

---

<div class="post-metadata">

**Author:** ![tylersmalley](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tylersmalley/32/8833_2.png) [@tylersmalley](https://discuss.elastic.co/u/tylersmalley)\
**Post date:** [April 30, 2018, 4:54pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/3 "2018-04-30T16:54:23Z")

</div>

You can also directly fetch the records your looking for. There are helpers, like `callWithRequest` to aide in making the ES calls through elasticsearch-js.

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [April 30, 2018, 7:58pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/4 "2018-04-30T19:58:16Z")

</div>

@Marlen,

thanks @tylersmalley, agreed that that is the best way to get custom queries to Elasticsearch.

For more information on how to write a custom visualization plugin, you might want to start with [https://www.elastic.co/guide/en/kibana/master/development-visualize-index.html](https://www.elastic.co/guide/en/kibana/master/development-visualize-index.html).

---

<div class="post-metadata">

**Author:** ![Marlen](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Marlen](https://discuss.elastic.co/u/Marlen)\
**Post date:** [April 30, 2018, 8:41pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/5 "2018-04-30T20:41:02Z")

</div>

Hi @thomasneirynck and @tylersmalley, thanks for your answers, I'm a little confused, I'm using VisFactory.createAngularVisualization to create my visualization, can I use these custom queries you are talking about within this type of visualization?, do I have to use a custom requestHandler or something like that? I was able to query ES using a custom requestHandler but now I don't know how to use the response from my controller, any suggestion?

Thanks

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [April 30, 2018, 9:01pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/6 "2018-04-30T21:01:32Z")

</div>

You can probably ignore the response-handler for now, since you are working with raw data.

fwiw I would advise against using the angular-visualization, Kibana is moving away from Angular in the long term. I would just use the BasesVisualization type for a first pass.

You would get the custom response of your request in your `Visualization#render(data)` method. cf. [https://www.elastic.co/guide/en/kibana/master/development-visualization-factory.html#development-base-visualization-type](https://www.elastic.co/guide/en/kibana/master/development-visualization-factory.html#development-base-visualization-type).

Alternatively, you could use the ReactVisualization type as well.

---

<div class="post-metadata">

**Author:** ![Marlen](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Marlen](https://discuss.elastic.co/u/Marlen)\
**Post date:** [May 1, 2018, 12:14am UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/7 "2018-05-01T00:14:26Z")

</div>

@thomasneirynck Im trying now with BaseVisualization but I still can't get the raw data, with Angular I was trying something like this within the requestHandler:

es.search({  
index: 'my\_index\*',  
body: {  
query: {  
match\_all: {  
}  
}  
}  
}, function (response, error) {  
hits = response;  
console.log(response);  
console.trace(error.message);  
});

but I just couldn't return the data to the controller because I think it is an async function, would you share with me an example of querying raw data (hits part of ES response) with this BaseVis?

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [May 3, 2018, 7:43pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/8 "2018-05-03T19:43:24Z")

</div>

Hi @Marlen,

I think a good working example would be to look into how the Vega-plugin is structured (`core_plugins/vega`). It is a base-visualization, with its own custom requesthandler, and does a custom to query ES.

---

<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 31, 2018, 7:43pm UTC](https://discuss.elastic.co/t/plugin-for-custom-visualization-based-on-hits/129892/9 "2018-05-31T19:43:24Z")

</div>

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