# Embedding visualizations docu error

**URL:** <https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771>\
**Category:** Kibana\
**Created:** [October 30, 2017, 2:44pm UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771 "2017-10-30T14:44:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![havidarou](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@havidarou](https://discuss.elastic.co/u/havidarou)\
**Post date:** [October 30, 2017, 2:44pm UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/1 "2017-10-30T14:44:13Z")

</div>

Hi everyone,

I'm following the documentation here: [https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html](https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html)

But I can't load a visualization. Whenever I try to do it, lots of errors appear in the browser's console:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/9/79add38aa3557a687616f4abd2409b2892199758.png)

When I inspect the html code, I see the directive has expanded inner tags, but I can't see anything:

![image](https://us1.discourse-cdn.com/elastic/original/3X/2/f/2f0ef9b8bcb619ceeaa93184b9f475b19049f785.png)

My controller:

```
app.controller('KbnTestController', function ($scope, AppState, savedVisualizations) {
    const visId = '86b01da0-bd7d-11e7-813c-357ee9494075';
    savedVisualizations.get(visId).then(savedVis => $scope.savedObj = savedVis);
});

```

My html:

```
<div ng-controller="KbnTestController" class="test_vis">
  <visualize saved-obj='savedVis'></visualize>
</div>

```

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [October 30, 2017, 8:28pm UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/2 "2017-10-30T20:28:39Z")

</div>

hi @havidarou

hard to tell from the code what's going wrong.

Instead of using the angular-directive, could you instead use the `ui/visualize/loader` module to embed a visualization?

You can use the

`visualizeLoader.embedVisualizationWithId(container, savedId, params)`

to achieve the same effect.

thanks,

---

<div class="post-metadata">

**Author:** ![havidarou](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@havidarou](https://discuss.elastic.co/u/havidarou)\
**Post date:** [October 31, 2017, 11:04am UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/3 "2017-10-31T11:04:12Z")

</div>

Hi @thomasneirynck

I've tried that too.

I'm using repo branch 6.0.

This is my index.js:

```
import { injectVars } from '../../src/core_plugins/kibana/inject_vars';

export default function (kibana) {

  return new kibana.Plugin({
    uiExports: {
      app: {
        title: 'Test Visualize',
        description: 'Test vis dddd',
        main: 'plugins/test_visualize_app/test_vis_app',
        uses: [
          'visTypes',
          'visResponseHandlers',
          'visRequestHandlers',
          'visEditorTypes',
          'savedObjectTypes',
          'spyModes',
          'fieldFormats',
        ],
        injectVars
      }
    }
  });
}

```

This is my whole controller:

```
'use strict';

import $ from 'jquery';
import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
import { VisProvider } from 'ui/vis';
import { VisualizeLoaderProvider } from 'ui/visualize/loader';

require('ui/autoload/all');
require('ui/routes').enable();
require('ui/chrome');
require('ui/visualize');

const app = require('ui/modules').get('apps/test_visualize_app', []);

require('ui/routes')
  .when('/', {
    template: require('./test_vis_app.html'),
    reloadOnSearch: false,
  });

app.controller('TestVisApp', function (
  $compile,
  $scope,
  $timeout,
  AppState,
  config,
  Private,
  timefilter,
  savedVisualizations
) {

  const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
  const visualizationService = services.visualizations;
  const visualizeLoader = Private(VisualizeLoaderProvider);

  const fetchItems = () => {
    visualizationService.find()
      .then(result => {
        $scope.savedVisualizations = result.hits;
      });
  };

  const visContainer = $('.test-vis-app-visualize');
  const timeRange = {
    min: '2017-09-01T00:00:00.000Z',
    max: '2017-10-31T00:00:00.000Z'
  };

  $scope.$watch('selectedVisualization', (visualizationId) => {
    if (!visualizationId) return;
    visualizeLoader.embedVisualizationWithId(visContainer, visualizationId, {
      timeRange: timeRange
    }).then(() => {
      console.log('renderComplete!');
    });
  });

  $scope.savedVisualizations = [];
  $scope.selectedVisualization = null;

  fetchItems();
});

```

And this is my html:

```
<div class="test-vis-app app-container" ng-controller="TestVisApp">

  <div class="test-vis-app-selector">
    <select ng-options="item.id as item.title for item in savedVisualizations" ng-model="selectedVisualization"></select>
    rendering: {{renderVisualization}}
  </div>
  <div class="test-vis-app-visualize"></div>
</div>

```

The selector successfully shows my saved visualizations:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/f/ffbc024c87be138efa2adac2e96fa50b6b56b6b5.png)

And after you select a visualization the console shows the tabify response with the print after rendering is complete:

![image](https://us1.discourse-cdn.com/elastic/original/3X/5/b/5b65f2b832be0b2bea1d472529476fcb1f9a46fc.png)

As I mention before, the HTML code get expanded, but nothing shows up in the screen:

![image](https://us1.discourse-cdn.com/elastic/original/3X/5/4/54d64d96a09ff5d04aea47476e99b5cd3d927f05.png)

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [November 1, 2017, 11:02am UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/4 "2017-11-01T11:02:32Z")

</div>

could you put your whole plugin to github ?

i am guessing you are missing some styles ... visualize requires flex display:

```auto
.test-vis-app-visualize, visualize, visualization {
 display: flex;
 flex: 1 1 100%;
}

```

---

<div class="post-metadata">

**Author:** ![havidarou](https://avatars.discourse-cdn.com/v4/letter/h/3ec8ea/32.png) [@havidarou](https://discuss.elastic.co/u/havidarou)\
**Post date:** [November 1, 2017, 2:58pm UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/5 "2017-11-01T14:58:26Z")

</div>

Hi @ppisljar,

I'm using the following less file with the same result:

```
 @import (reference) "~ui/styles/mixins.less";

.test-vis-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.test-vis-app-visualize, .test-vis-app-visualization, visualize, visualization {
  display: flex;
  flex: 1 1 100%;
}

```

P.S.: the Kibana branch is 6.0

And this is the whole plugin: [https://uploadfiles.io/fpxbe](https://uploadfiles.io/fpxbe)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 29, 2017, 2:58pm UTC](https://discuss.elastic.co/t/embedding-visualizations-docu-error/105771/6 "2017-11-29T14:58:28Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.