Embed dashboard or visualization on an external web page with specified filters

[f26227279 (張皓翔)]

Hi, as title I want to embed the kibana dashboard or visualization on an external web page with specified filters.
I found a way when I refer the reference:
https://www.elastic.co/guide/en/kibana/6.1/development-embedding-visualizations.html

<div ng-controller="KbnTestController" class="test_vis">
  <visualize saved-obj='savedVis'></visualize>
</div>
import { uiModules } from 'ui/modules';

uiModules.get('kibana')
.controller('KbnTestController', function ($scope, AppState, savedVisualizations) {
  const visId = 'enter_your_vis_id';
  savedVisualizations.get(visId).then(savedVis => $scope.savedObj = savedVis);
});

,but I don't know where to run this code and what parameter should I modified

thank you in advance

[tsullivan (Tim Sullivan)]

Since you want to embed the chart on an external page, the documentation you found is not the right direction -- that's for creating new plugins or apps within Kibana, not external. Sorry about the confusion.

You can just navigate to the visualization you want to embed, add the filters, then click the Share button to get a URL to use for iframe code in your external page.

1. Create the visualization, apply the filters, then save the visualization
2. Click "Share" at the top
3. Copy the iframe code
4. Paste the iframe code into your external HTML

Example, shown on: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

[f26227279 (張皓翔)]

thanks for your reply
I have another question is that could I hide the "add a filter" and "action" in the dashboard or the visualization?

[tsullivan (Tim Sullivan)]

Hiding those controls is not possible at the moment, unfortunately.

There is an open feature request that would address that enhancment: https://github.com/elastic/kibana/issues/9575 requests that feature.