How to use visualization directive with Kibana plugin

Elastic Stack Kibana
1

I want to run Visualize's sample code using the visualization directive described below with kibana 6.0.0-rc2.
Although no error is output to the server console or the browser console,
Visualize is not displayed and it is a completely white screen.

https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html

The code is as below.

・index.html

<div ng-controller="KbnTestController" class="test_vis">
  <visualization vis='vis' vis-data='visData'></visualize>
</div>

・app.js

import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import template from './template/index.html';
import { VisProvider } from 'ui/vis';
import './less/app.less';
import 'ui/courier';
import 'ui/modals';

uiRoutes.enable();
uiRoutes
.when('/', {
  template
});

uiModules.get('kibana')
.controller('KbnTestController', function ($scope, Private) {
  const Vis = Private(VisProvider);
  const visConfig = {
    type: 'metric'
  };
  $scope.vis = new Vis('b9e56600-a27d-11e7-94dc-eb7c16196973', visConfig);
  $scope.visData = [{ columns: [{ title: 'Count' }], rows: [[ 1024 ], [ 256 ]] }];
});

・app.less

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

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

.test_vis, visualize, visualization {
  display: flex;
  flex: 1 1 100%;
}

Please tell me how you can fix Visualize if you modify it.
Thank you.

2

Hey @drumn, the code you pasted looks a lot like the code for a custom application, not the code for a custom visualization. Have you tried using https://github.com/elastic/template-kibana-plugin/ to generate a custom visualization plugin? (NOT a custom app plugin)

3

Thank you for your reply.

The code shown is based on the template created by "sao kibana-plugin" command.

If you have a set of sample code that actually displays Visualize using Visualization directive, please let me know.

Thank you.

4

Ah, didn’t realize the generator doesn’t support creating custom visualization types. Try checking out https://github.com/nreese/kibana-time-plugin, it’s a great interactive custom visualization. The key is defining a uiExport for your vis type and using the right APIs to extend the custom vis type registry.

5

https://www.elastic.co/guide/en/kibana/master/development-create-visualization.html might be a better doc to follow

6

Thank you for your early reply.
I will check the URL you taught.

Will there be plans for the generator to support the creation of custom visualization types in the future?
I strongly hope to support it!

1 Like
7

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