Embed graph in another site

[pvledoux]

Hi, is there a way to embed Kibana graphs in another site? It would be great to be able to embed some results and visuals in our CMS dashboard.

[tmaiaroto]

There's a lot of stuff that goes on under the hood. It's possible, but you'll need a bit of elbow grease. I would basically iframe in a view to avoid any issues you may have with CORS headers, etc. Here's how I would go about it:

Take a look at index.html and then dashboard.html (which gets placed inside the ng-view div element). Then look at app.js where it says $routeProvider is specifically where you will want to pay attention because here is where you'd add a new route to your own view.

The dashboard layout configuration is stored in JSON format and I think you can still use it for your needs (especially because it'll save you time here), but it's always going to include certain elements on the page. So I'd start by duplicating the dashboard.html file and removing the pieces that you don't need (maybe it's the query, filtering, etc.). I'd also include a style sheet or add a style block to hide elements from the index.html file such as the navbar.

Now you can add a new route to app.js for something other than "dashboard" I don't know, name it like "embed" or "widget" or something. You'll want to copy and add all three routes (with the params and such). Anyway, change up the template to use the new partial you copied and renamed.

Go to the main app dashboard like normal. Configure a row and a panel (or however many rows and panels you want). Then save that. Now note the URL, it'll be something like: http://kibana.dev.local/src/index.html#/dashboard/elasticsearch/my%20saved%20dashboard

Instead of /dashboard/elasticsearch/name... you'll want to change "dashboard" to your new route, maybe it was "embed" or something.

That should now load your copy of the dashboard partial that has everything removed. You of course are free to add whatever HTML to this template and change out styles, etc. So make it work for your needs.

Then you can embed that page via an iframe into your CMS or where ever.

Just keep in mind I thought of all this off the top of my head and you'll likely run into some hiccups along the way. However, I think this would be a good start and is the first approach I would take. It's completely non-destructive and if you kept pulling in changes from the repository, the most you'd ever have to contend with would be some minor conflicts in the app.js file (but that file would hopefully automatically merge).

Ok. I very quickly copy and pasted the three routes, duped the dashboard.html and called it embed.html. Literally took a URL to one of my saved dashboards and replaced "dashboard" with "embed" and voila. It worked. Now, you'll also want to ensure "editable" and "collapsible" are not checked for your rows/panels when you're completely done. That will hide the button icons and should prevent anyone from altering things. HOWEVER -- it's on you to protect your dashboard from alterations. This will be your next challenge.

[tmaiaroto]

It would be good to also have a checkbox for each panel that locked out it's move/drag and drop functionality. You can check off the "spy" and the "editable" options, but you would still see the move icon in the top right. This would require more than a simple hack and the application would need to be changed. You could of course hide things with CSS though for your needs.

[pvledoux]

Hi Tom, thanks a lot for your response! I'm going to try this, but it sounds already promising!

Cheers!

[guptayuvraj]

@tmaiaroto @pvledoux Have you tried it up?
Have u been successful in doing so?

Can you share your script file which directly embeds panel into a website?