kibana-API 0.6.1(kibana 6.5.0 and above)

Kibana-API is an extension to Kibana that lets you tap in to the dashboard management board from your app and change the visualizations dynamically.

I recommend you read all, step by step, but if you don't have patience go to How To Use

Demo

postMessage

The plugin uses Window.postMessage() method (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), to connect between the applicaion and the kibana iframe

var iframe = document.getElementById('Iframe');

in javascript use:
var iWindow=iframe.contentWindow

in typescript use:
var iWindow = (<HTMLIFrameElement>iframe).contentWindow;

iWindow.postMessage({}, '*');

Events

setVisualization

In order to create a visualization you need to call the plugin with the visualization state. Kibana-API is able to recieve all the visualization's properties (isFullState = true) - fullState. In case you do not wish to define all the visualization's properties (isFullState = false), you can pass some and Kibana-API will automatically fill-in the rest. partial visState

Add visualization

Replace visualization

Filter Functions

Filter functions

Index Pattern Functions

Index pattern functions

Time Functions

Time Functions

How to Use

1. Install the plugin, look at https://github.com/Webiks/kibana-API/wiki/Installs
2. Restart Kibana
3. Index data to elasticsearch (if you have not done so before)
4. Navigate to localhost:5601 and:
   a) Create kibana index-pattern (you can also do that with create index pattern function
   b) Create dashboard
   c) Press on the share button and copy the Embedded iframe URL to your HTML application (don't use the save dashboard link)
   
5. Give ID to the iframe element.
6. Look At my example :https://github.com/Webiks/kibana-API/wiki/Replace-Visualization or https://github.com/Webiks/kibana-API/wiki/Add-Visualization
7. Enjoy

Development

Build plugin

• clone git repo in kibana_home/plugins
• cd kibana_home/plugins/kibana-API
• npm install

Run unit test

npm test

Help me to improve!:

If there's any problem or doubt, please, open a Github Issue (Pull Request) or contact me via email: [email protected].