Add ZingChart-AngularJS into Kibana App - zingchart is not defined

Elastic Stack Kibana
1

Hello,

I'm building a plugin application for Kibana 6.2.4 and I would like to add a Chart. I injected this directive ZingChart-AngularJS.

This is my app.js:

import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';

import 'angular-ui-bootstrap';
import 'zingchart-angularjs';

import 'ui/autoload/styles';
import './less/style.less';
import index from './templates/index.html';


uiRoutes.enable();

uiRoutes
.when('/', {
  template: index,
  controller: 'getAllAlertsController',
  controllerAs: 'controller'
});

uiModules

.get('app/my_alerts',['ui.bootstrap', 'zingchart-angularjs'])

.controller('getAllAlertsController', function ($scope) {  
  $scope.myData = [1,4,5,5,10];
});

And this is my index.html:

<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>  -->
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>  
<script src="https://cdn.zingchart.com/angular/zingchart-angularjs.js"> </script>
<div class="container">
    <div class="row col-md-12 panel-default">
        <div class="panel-heading"> 
            <h1> My Alerts </h1> 
        </div>          
        <div class="panel-body">
	        <zingchart id="chart-1" zc-values="controller.myData"></zingchart> 
        </div>
    </div>
</div>

I run npm install zingchart-angularjr, I imported it in app.js and check my network ! Everything loaded ! But I've this error in my console: zingchart is not defined :thinking:

This my first time where I injected something into Kibana App. My code is fine, no?

2

Did you add this dependency to your package.json?

3

Of course @Stacey_Gammon!

"dependencies": {
"angular-ui-bootstrap": "^2.5.6",
"elasticsearch": "^14.1.0",
"zingchart": "^2.8.0",
"zingchart-angularjs": "^1.2.0"
}

4

Actually, I installed AngularJS-FusionCharts and I got the same error (of course the error became fusioncharts is not defined).

Any idea ? What I've to do in this case ? :face_with_raised_eyebrow:

5

Hey @Stacey_Gammon ^^

Is there any way to integrate packages in Kibana plugin ? Is that possible ?

Thanks for advance :slight_smile:

6

yes, this should definitely be possible.

Did you create your plugin using the plugin generator? The package.json created from that command has a bunch of extra dependencies, more than what you listed here

Then run yarn start in your plugin folder and it should download the dependencies and copy your plugin into kibana.

7

Thanks for the reply @Stacey_Gammon!

{
  "name": "my_alerts",
  "version": "6.2.4",
  "main": "index.js",
  "scripts": {
    "lint": "eslint",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build",
    "postinstall": "plugin-helpers postinstall",
    "gather-info": "node gather-info.js"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "^0.6.1",
    "@elastic/plugin-helpers": "^7.0.2",
    "babel-eslint": "^7.2.3",
    "eslint": "^3.19.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-mocha": "^4.9.0",
    "eslint-plugin-react": "^7.0.1",
    "expect.js": "^0.3.1"
  },
  "dependencies": {
    "elasticsearch": "^14.1.0",
    "ui-bootstrap4": "^3.0.4",
    "zingchart": "^2.8.0",
    "zingchart-angularjs": "^1.2.0"
  }
}

I think my package.json is fine now !
But still have the same error message ! zingchart is not defined :frowning:

8

Actually, I didn't create my plugin using the plugin generator!
I took the same structure of Kibana Apps plugin (from here).

Is this the same thing ?

9

Well, I create new plugin using plugin generator and he works perfectly into my Kibana instance as a first step !

Second step, I installed the package Zingchart using npm install zingchart-angularjs and I included all dependencies into my index.html:

<script type="text/javascript" src="https://cdn.zingchart.com/zingchart.min.js"></script>  
<script type="text/javascript" src="https://cdn.zingchart.com/angular/zingchart-angularjs.js"> </script>

<div class="container" ng-controller="myAlertsHelloWorld">
  <div class="row">
    <div class="col-12-sm">
      <div class="well">
        <h2>Congratulations</h2>
        <p class="lead">You've successfully created your first Kibana Plugin!</p>
      </div>
      <h1>{{ title }}</h1>
      <p class="lead">{{ description }}</p>
      <p>The current time is {{ currentTime }}</p>
    </div>
  </div>
  <div class="row">
    <zingchart id="chart-1" zc-values="myData"></zingchart>
  </div>
</div>

(I checked my network browser, all dependencies are loaded !)
Third step, I injected the directive zingchart-angularjs in my app.js:

import moment from 'moment';
import chrome from 'ui/chrome';
import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';

import 'ui/autoload/styles';
import './less/main.less';
import template from './templates/index.html';

import 'zingchart-angularjs';

uiRoutes.enable();
uiRoutes
.when('/', {
  template,
  resolve: {
    currentTime($http) {
      return $http.get('../api/my_alerts/example').then(function (resp) {
        return resp.data.time;
      });
    }
  }
});

uiModules
.get('app/my_alerts', ['zingchart-angularjs'])
.controller('myAlertsHelloWorld', function ($scope, $route, $interval) {
  $scope.title = 'My Alerts';
  $scope.description = 'An awesome Kibana plugin';

  $scope.myData = [1,4,5,5,10];  

  const currentTime = moment($route.current.locals.currentTime);
  $scope.currentTime = currentTime.format('HH:mm:ss');
  const unsubscribe = $interval(function () {
    $scope.currentTime = currentTime.add(1, 'second').format('HH:mm:ss');
  }, 1000);
  $scope.$watch('$destroy', unsubscribe);
});

And unfortunately I still have this error !

2
2.png1598×492 37.9 KB

1
1.png1596×802 70.6 KB

Package.json:

{
  "name": "my_alerts",
  "version": "0.0.1",
  "description": "An awesome Kibana plugin",
  "main": "index.js",
  "kibana": {
    "version": "6.2.4"
  },
  "scripts": {
    "lint": "eslint",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build",
    "postinstall": "plugin-helpers postinstall"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "0.0.2",
    "@elastic/plugin-helpers": "^6.0.0",
    "babel-eslint": "4.1.8",
    "chai": "^3.5.0",
    "eslint": "1.10.3",
    "eslint-plugin-mocha": "1.1.0"
  },
  "dependencies": {
    "zingchart-angularjs": "^1.2.0"
  }
}

Did I miss something here @Stacey_Gammon ?

10

Even am trying to do pretty similar stuff, did you get confirmation that your code is alright ?

With Regards,
Kegno Motre https://plex.software/
https://tutuappx.com/
https://vidmate.onl/

11

Yes :wink:
Actually I need to add a dependency. You've to add require('zingchart'); into app.js.

Good luck ^^

12

https://vidmatedownloading.com