Custom Visualisation - Specify OnClick event handler


(Martin Clarke) #1

Greetings Kibana community!

I am attempting to determine the "proper" way to specify what happens when the a user clicks a bar in the histogram visualisation. I pulled out the source code and noted the VislibVisType object that is created, appears to define various settings relating to the histogram.

Given that that I believe these visualisations make use of flot, is there any analogue in VislibVisType for specifying the bindEvent hooks, for the underlying flot graph?

I should add that I am very new to almost all of the technologies used in the Elastic stack, so please forgive me if I have missed something glaringly obvious!


(Joe Fleming) #2

The visualizations in Kibana aren't based on flot, they use D3 and we use our own wrapper visualization library.

I don't think I understand what you're trying to do though. Are you trying to create your own visualization plugin, or add something to the existing click handler?


(Martin Clarke) #3

Thanks for the response Joe!

I was scraping my information together from various sources that I could find, and it looks like I picked up some misinformation.

Ideally, the aim is to "do something" when a part of a visualisation is clicked. IE A bar on a histogram, a segment on a pie chart, dot on a line chart etc. The "something" is still being debated by the product owners and architects, but it will likely involve communication with an entity external to Kibana; be it a browser plugin, web api, or something else entirely.

For experimentation purposes I had simply copied out the existing visualisations into installedPlugins. However, if it would be possible to modify the existing visualisation plugins, without a great deal of intrusion, that would be ideal.

In conclusion: I need to add something to the existing click handler.


(Martin Clarke) #4

This project has now been shelved until a later date (we're still going to be using Kibana, just without the onclick customisation, though that is likely to be coming back).

For posterity, and anyone else who needs the information, this is far as I got. I should also add, this relevant to Kibana 4.5 and the histogram plugin.

Specifying custom OnClick handler - overridden by Kibana
In the JavaScript file specifying the parameters for a visualisation (e.g. histogram.js) you may insert the following into the "VislibVisType" initialisation code:

return new VislibVisType({
...
listeners: {
click: function() { alert('clicked!'); }
}
...
});

It appears only a single click handler is supported (I have not tried setting "click" to an array of functions), and that whatever you specify is overridden by "something" in the Kibana code base. The overriding click function pertains to drilling down through the chart data, and as far as I can see, this is standard Kibana functionality.

Specifying OnClick within the Kibana code base (hacky idea, but if you are pressed for time...)
In the Kibana source code (src\ui\public\vislib\visualizations\column_chart.js), within the prototyping for the "addBars" function, it is possible to access a "bars" collection that relates to the bars you see on the visualisation. It is then a trivial matter of adding an OnClick thusly:

bars.each(function() {
$(this).on('click', function () {
alert("clicked!");
});
});

I stress that this is a flagrant disregard for the intended structure of the visualisation wrapper, but lacking any information relating to what I wanted to do, it was the only way I could to achieve the goal.

Should anyone happen upon this post and realise what information is missing, it would be helpful if you could chime in. If only to assist other developers in the future, and myself if I come back to this.


(Kofi) #5

Hey, did you by any chance start this project up again? I'm trying to do the exact same thing and customizing the Onclick functionality of the graphs is really ideal for a lot of use cases...