Drill down on charts

Elastic Stack Kibana
1

Is there a way in kibana to do a drill down function on charts?

I'm trying to create a pie chart that when a part of the chart is clicked, it will show what makes that part up.

let's say I sub bucket my data by "groups" and those "groups" are made up of "members". What I want to do is that when I click a group, the chart changes to one that is now made up of members of this group.

The closest I've done is to have separate charts. When the first one is filtered, the second one is filtered as well. Splitting the first chart by groups and then splitting them again doesn't look too clean.

Is there a way to achieve this?

2

anyone?

3

The closest I've done is to have separate charts. When the first one is filtered, the second one is filtered as well. Splitting the first chart by groups and then splitting them again doesn't look too clean.

That's the best you're going to get with the native pie chart visualizations. There's no way to attach custom click logic to pie charts (or any other charts), they simply allow you to filter on values and change colors. What you'd need to do to achieve the interaction you want is to both apply a filter and also change the aggregation. You could probably write a custom vis plugin that would give you this, or one may exist, but Kibana won't do this out of the box.

4

How would I be able to make a custom visualization? Is there a documentation or resource teaching how to do this?

5

Sadly, documentation is pretty much non-existent, but you can take a look at the Kibana codebase to see how those visualizations work. Kibana is mostly a collection of plugins written against a common core.

There's also a number of external plugins in the wild that you can look through too.

To help you bootstrap a plugin, check out the plugin template.

6

Can I make the plugin similar to a visualization? As I can see, the plugin appears as a separate tab in the kibana menu. Is there a way to put it under visualizations? I want reporting to be able to pick it up too.

7

Sure can. If you look in the core plugins in Kibana, you can see that Markdown, Tilemap, and Table vis are themselves plugins. In fact, all of the visualizations in Kibana are plugins, and you can add your own by using the visualization registry. And as mentioned, there's a bunch of external vis plugins too. Everything is open source, so you can see how they all work by looking at the code.

If we, for example, look at the table vis for how to do this, we see that in the main index.js file, it specifies a visTypes property with an array of files to load. Here, plugins/table_vis/table_vis maps to the local path of public/table_vis.

Looking in that file, notice the use of ui/registry/vis_types, which is used to register the table vis provider. All visualizations work this way, so you can dig through there and see what is required.

So effectively, when you create your plugin, you just need to do the same things you see other vis plugins doing.

9

So, I created a custom application and I've successfully imported highcharts. As usual, I'll be querying elasticsearch from this plugin and it would be handy to have the timepicker from the upper right corner when I'm on the Discover, Visualize, Dashboard... etc... windows. Is there a way to enable this on my custom plugin? If so, how do I get the values from them?

I'm basically following the guide here but I still find it confusing. Can you shed some light on some of the complex concepts? Like, what's the difference between the kibana API and the elasticsearch API? Will I be able to perform complex queries (using aggregates, multiple conditions, grouping and ordering) now that I'm using a custom plugin?

10

Like, what's the difference between the kibana API and the elasticsearch API?

There is no Kibana API, so I'm not sure what you're asking. All communication happens against Elasticsearch. As mentioned in that tutorial, you'll likely want to use server.plugins.elasticsearch.callWithRequest to do that communication. All callWithRequest does is take the request object, and use it to talk to Elasticsearch. This is useful and important to be able to enforce authentication.

Will I be able to perform complex queries (using aggregates, multiple conditions, grouping and ordering) now that I'm using a custom plugin?

Yes, callWithRequest is basically a passthrough for the javascript Elasticsearch client (which passes along auth data, as mentioned). So anything you can do with that library, you can do with that helper. You can also write custom methods that you can plug in to the client, but I'll tell you from experience that that part of it is tricky to understand (I still don't get it myself).

As an example, from that tutorial, server.plugins.elasticsearch.callWithRequest(req, 'cluster.state', {...}) is calling the cluster.state method and the object as the 3rd argument gets passed to that method as the params. Anything in the ES-JS client can be used this way, and the API docs there are pretty thorough.

As for accessing the timepicker data... I don't know offhand. I'll admit I've only ever written APIs and other functionality as plugins, I've never tried to build a visualization. Most visualizations simply use the "courier", which is an abstract way to query Elasticsearch, something I've learned a little in the past, but no longer understand. I believe the courier takes the timepicker value into account, so if you use something else, you have to pull that value yourself.

I dug through and got a little guidance, and learned that there's a timepicker service that provides that information. The new time series visualizations do this, and you can see the code that does it here: https://github.com/elastic/kibana/blob/master/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js

11

Is there something in kibana disabling the drilldown in highcharts? I've copied the code exactly as is from here and the drill down function doesn't work. Any ideas why?

Edit: OK, so I've found out that it requires drilldown.js. I've imported it using
import 'highcharts/modules/drilldown' but still doesn't work.

12

I don't believe so. I know the core visualizations handle click events, but if you're not wrapping yours up in that implementation (and I can't imagine why you would be), it shouldn't matter to you at all. If you do a little debugging, do you see the click event registering on your visualization?

13

Yeah, you're right. Click events are registering. I was missing a JS library that adds events on click functions. Thanks.

14

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