How to add visualizations in Kibana custom plugins

Elastic Stack Kibana
1

Hello everyone,

I am new to plugin development and wonder how I can display visualizations in a custom Kibana plugin. Whether I include visualizations of saved objects or define new visualizations in the Javascript code is not important to me. I am currently using Kibana/Elastic Version 7.9.0

Unfortunately I only found outdated documentation on this Topic. One of the most promising links was this forum entry. Embedding visualization in Kibana custom plugin

I would be happy about an existing tutorial, webinar or sample code.
Thanks a lot and greetings
siiman

2

Hi @siiman,

Unfortunately there is no useful docs or guides on developing custom visualizations, please follow https://www.elastic.co/guide/en/kibana/7.9/development-visualize-index.html to learn more about current state and plans.

Nevertheless, if your end goal is display something custom on a dashboard (I am not sure, but just assuming), then I'd suggest to take a look at embeddables plugin: https://github.com/elastic/kibana/blob/master/src/plugins/embeddable/README.md

There are many examples on how to create a custom type of panel that can be added to a dashboard. Then inside of panel you could render anything you'd want: e.g. fetch you data and render as visualisation.

You could follow visualize embeddable source code to see how existing visualisations are implemented

Hope this is helpful.

3

Hello dosant,

thanks for your fast reply. Unfortunately I don't try to create a custom visualization but to integrate a standard visualization into a custom plugin (or app?).
Please excuse me, if I did not make this clear.

I am currently developing an app that I created with the Kibana plugin generator (node scripts/generate_plugin). In this app I want to display different visualizations (bar chart, metrics or pie charts). But I don't know if there is a way to include already finished visualizations that are available as saved objects or if I have to build the visualizations from scratch with the help of JavaScript (what should the syntax look like? Is there a template?).

In a next step I would like to filter/limit these visualizations via input elements. The final result should be a kind of dashboard, but it should offer me more user-defined views/settings than the Elastic Dashboard.

kind regards
siiman

4

As I mentioned, unfortunately there are no step by step guides for something like this
But I can share the direction:

  1. Your custom Kibana app is no different than any other app in Kibana. So you can do everything that original dashboard can do. You also can use existing visualizations pipeline and saved objects.
  2. Having that in mind, I think I'd start exploring from how dashboard app works. Explore which kibana services it uses. Dashboard plugin entry point. AngularJs controller. Beware, it is still uses AngularJS and has some legacy, you plugin will likely end up being a lot simper.
  3. You'd notice that actual dashboard rendering is driven by embeddable plugin: https://github.com/elastic/kibana/blob/master/src/plugins/embeddable/README.md.
  4. There is an example plugin, which renders a dashboard inside of another app. Maybe this is something you could use for a reference. https://github.com/elastic/kibana/blob/master/examples/dashboard_embeddable_examples/README.md . To see that example running, run Kibana with --run-examples flag, you'd see a new Kibana app in navigation: "Developer examples", then from there you would find a dashboard embeddable example app. In that app you can input "dashboard configuration" and see it rendered as a dashboard. Maybe its code could help you to get an idea.

Hope this is helpful and good luck with that.
Improving dev docs around all of these is on our roadmap.

5

All right, thanks for the web links and the help. Then I'll have a look at the source code and look forward to the upcoming documentation.

kind regards
siiman

6

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