# How to create and embedd Visualizaitions in kibana plugin

**URL:** <https://discuss.elastic.co/t/how-to-create-and-embedd-visualizaitions-in-kibana-plugin/257601>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [December 4, 2020, 1:25am UTC](https://discuss.elastic.co/t/how-to-create-and-embedd-visualizaitions-in-kibana-plugin/257601 "2020-12-04T01:25:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![K\_Chaitanya](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/k_chaitanya/32/46387_2.png) [@K\_Chaitanya](https://discuss.elastic.co/u/K_Chaitanya)\
**Post date:** [December 4, 2020, 1:25am UTC](https://discuss.elastic.co/t/how-to-create-and-embedd-visualizaitions-in-kibana-plugin/257601/1 "2020-12-04T01:25:46Z")

</div>

Hi,

I am trying to create a visualization from gui in kibana. and then trying to fetch that visualization (later will export that visualization as json and include it in the package) into kibana plugin using `visualizations` plugin in kibana 7.10.0.

here is the code.

```auto
const loadvis = async () => {
    const vises = visualizations.all()
    const all_saved_vis = await visualizations.savedVisualizationsLoader.find('testVis').then(async (response) => {
        setVisHits(response.hits[0]);
        console.log(response.hits[0]);
        const response_hits_0_visState = response.hits[0];
        response_hits_0_visState["visState"] = JSON.parse(response.hits[0]["visState"]);
        const TestVis = visualizations.convertToSerializedVis(response_hits_0_visState);
        console.log("TestVis :",TestVis)
        console.log("TestVis.data.searchSource :",TestVis.data.searchSource)
        const x:SearchSourceFields = {
          index: indexPattern
        }
        TestVis.data.searchSource = x

        const SerialVis = await visualizations.createVis('histogram', TestVis).then(async (VIS) => {
          const emb = await visualizations.__LEGACY.createVisEmbeddableFromObject(VIS, { id: "testOne" },visualizations.savedVisualizationsLoader)
            .then((embbed) => {
              const htmlele = document.getElementById("test1");
              setEmbeddable(embbed);
              embbed.render(htmlele)
              console.log("embedd :", embbed);
              return embbed;
            }
          );
          console.log("embedd :", emb);
          return VIS;
        }, (reason) => { return reason; });
        console.log("VIS :", SerialVis);
        return response;
      },(reason) => {return reason})
    console.log("Visualizations :",vises)
    console.log('all_saved_vis :',all_saved_vis)
  }

```

`embbed.render(htmlele)` does not seem to work.

this does not throw any error nor does it render the visualization.

is this the correct way I am doing? please help

Thanks and regards  
K Chaitanya M Rao

---

<div class="post-metadata">

**Author:** ![dosant](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dosant/32/64489_2.png) [@dosant](https://discuss.elastic.co/u/dosant)\
**Post date:** [December 4, 2020, 2:23pm UTC](https://discuss.elastic.co/t/how-to-create-and-embedd-visualizaitions-in-kibana-plugin/257601/2 "2020-12-04T14:23:47Z")

</div>

Hi @K_Chaitanya

> await visualizations.createVis('histogram', TestVis)

I don't think this is correct, afaik, this is used to register a new visualization type and not to create instance of visualization type.

I think you should try to use `visualizeEmbeddableFactory.createFromSavedObject` instead [https://github.com/elastic/kibana/blob/master/src/plugins/visualizations/public/embeddable/visualize\_embeddable\_factory.tsx#L141](https://github.com/elastic/kibana/blob/master/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx#L141)

`savedObjectId` is `testVis` and using `input` I _think_ you can override searchSource.

---

<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:** [January 1, 2021, 2:24pm UTC](https://discuss.elastic.co/t/how-to-create-and-embedd-visualizaitions-in-kibana-plugin/257601/3 "2021-01-01T14:24:01Z")

</div>

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