How can i create Custom visualization and add as a plugin in kibana

[yash_mangla (Yash M.)]

Hello Guyz,

this questions is reference of below question.
https://discuss.elastic.co/t/how-i-can-add-my-custom-graph-visualization-in-kibana/112223

I'm basically 1st trying to understand how data flow and rendering is working. when we wrote a plugins. so I already gone through above link mentioned blogs and documentations. which @ppisljar has provided.

But there are couple of issue i'm facing at initial stage. I thought there might be some syntax mistakes in my code so i replaced my complete code with webinar demo complete source code from GitHub issue repository which is provided by @thomasneirynck at this URL .

So i extracted those zips so i got these 2 directory.

so I just copied "webinar_visualization" in my kibana/plugins/ directory.
and restarted Kibana server. but after restarting server kibana through me such kind of errors.

I'm stuck with this internal things kindly help to resolve this so atleast i can quickly kick start with my with my visualization.

Regards,
Yash M.

[ppisljar (Peter Pisljar)]

what version of kibana are you running ?

[yash_mangla (Yash M.)]

In my system i have
- node version (v8.6.0)
- npm version (5.3.0)
- ELK version (6.2.3)
- Chrome version (Version 66.0)

[ppisljar (Peter Pisljar)]

that example only works with 6.0

to see a working example for 6.2 check one of the core plugins, markdown is probably the simplest one, or metric visualization

[yash_mangla (Yash M.)]

thanks @ppisljar ,

I just checked one or two core plugins. I thought that's the problem because kibana is switched from ECMA5 to ECMA6.

I just have little query on data model and rendering part.

Basically, when I'm trying to put my Custom Visualization module in plugin. and my visualization expecting some specific format data only. so,

1. In which file we have edit to change the default data model to expected model of visualization.
2. Where we will write our rendering visualization rendering mechanism for visualization.

Can you give little direction to me..

[ppisljar (Peter Pisljar)]

I don't really understand the question, but the resources suggested in How I can add my custom graph visualization in kibana

together with recent code (like current markdown or metric visualization) should help you get started.

things didn't change much since 6.0, but there were some minor changes, but you should be able to spot those from our current code. (maybe even compare metric code between versions ... however it was ported to react lately, so that might complicate stuff a bit)

in general we no longer recommend writing your visualizations in angular, as we are migrating away from it.

[yash_mangla (Yash M.)]

Hi @ppisljar,

@ppisljar

in general we no longer recommend writing your visualizations in angular, as we are migrating away from it.

Could you please let me know what language you currently support to write our own visualization. ?

@ppisljar

I don't really understand the question, but the resources suggested in How I can add my custom graph visualization in kibana

Basically, every visualization expect some specific data structure like whether it is flat/nested json data we are getting from REST API. i just want to know if we going to write our visualization is there any specific object which we can manipulate on run-time rendering ?