diff --git a/docs/development/visualize/development-embedding-visualizations.asciidoc b/docs/development/visualize/development-embedding-visualizations.asciidoc index 771b49d4deaee..604a59e531895 100644 --- a/docs/development/visualize/development-embedding-visualizations.asciidoc +++ b/docs/development/visualize/development-embedding-visualizations.asciidoc @@ -1,11 +1,7 @@ [[development-embedding-visualizations]] === Embedding Visualizations -There are two different methods you can use to insert a visualization in your page. - -To display an already saved visualization, use the `VisualizeLoader`. -To reuse an existing visualization implementation for a more custom purpose, -use the Angular `` directive instead. +To embed visualization use the `VisualizeLoader`. ==== VisualizeLoader @@ -58,47 +54,4 @@ The returned `EmbeddedVisualizeHandler` itself has the following methods and pro - `removeRenderCompleteListener(listener)`: removes an event listener from the handler again You can find the detailed `EmbeddedVisualizeHandler` documentation in its -{repo}blob/{branch}/src/ui/public/visualize/loader/embedded_visualize_handler.js[source code]. - -We recommend *not* to use the internal `` Angular directive directly. - -==== `` directive -The `` directive takes a visualization configuration and data. -It should be used, if you don't want to render a saved visualization, but specify -the config and data directly. - -`` where - -`vis` is an instance of `Vis` object. The constructor takes 3 parameters: - -- `indexPattern` : the indexPattern you want to pass to the visualization -- `visConfig` : the configuration object -- `uiState` : uiState object you want to pass to Vis. If not provided Vis will create its own. - -`visData` is the data object. Each visualization defines a `responseHandler`, which defines the format of this object. - -`uiState` is an instance of PersistedState. Visualizations use it to keep track of their current state. If not provided -`` will create its own (but you won't be able to check its values) - -*code example: create single metric visualization* -["source","html"] ------------ -
- -
------------ -["source","js"] ------------ -import { uiModules } from 'ui/modules'; - -uiModules.get('kibana') -.controller('KbnTestController', function ($scope) { - const visConfig = { - type: 'metric' - }; - $scope.vis = new Vis('.logstash*', visConfig); - $scope.visData = [{ columns: [{ title: 'Count' }], rows: [[ 1024 ], [ 256 ]] }]; -}); ------------ - - will trigger `renderComplete` event on the element once it's done rendering. +{repo}blob/{branch}/src/ui/public/visualize/loader/embedded_visualize_handler.js[source code]. \ No newline at end of file