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
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({}, '*');
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
- Install the plugin, look at https://github.com/Webiks/kibana-API/wiki/Installs
- Restart Kibana
- Index data to elasticsearch (if you have not done so before)
- 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) - Give ID to the iframe element.
- Look At my example :https://github.com/Webiks/kibana-API/wiki/Replace-Visualization or https://github.com/Webiks/kibana-API/wiki/Add-Visualization
- Enjoy
- clone git repo in
kibana_home/plugins
cd kibana_home/plugins/kibana-API
npm install
npm test
If there's any problem or doubt, please, open a Github Issue (Pull Request) or contact me via email: ytzhak@webiks.com.