Kibana Customized Visualization with ES and Angular Doesn't Work
<p>First, I try to make a custom visualization in Kibana with learning <a href="https://www.timroes.de/2015/12/02/writing-kibana-4-plugins-simple-visualizations/" rel="nofollow">here</a>.</p>

<p>Then, I want my custom visualization to display like the clock how many hits my elasticsearch index has dynamically .</p>

<p>So, I changed some codes in above tutorial but they don't work. </p>

<p>Chrome Devtools tells says <code>Error: The elasticsearch npm module is not designed for use in the browser. Please use elasticsearch-browser</code></p>

<p>I know I had better use elasticsearch-browser perhaps.</p>

<p>However, I want to understand what is wrong or why.</p>

<p><code>public/myclock.js</code></p>

<pre><code>define(function(require) {
    require('plugins/&lt;my-plugin&gt;/mycss.css');
    var module = require('ui/modules').get('&lt;my-plugin&gt;');
    module.controller('MyController', function($scope, $timeout) {
        var setTime = function() {
            $scope.time = Date.now();
            $timeout(setTime, 1000);
        };
        setTime();
        var es = function(){
            var elasticsearch = require('elasticsearch');
            var client = new elasticsearch.Client({
              host: 'localhost:9200',
              log: 'trace'
            });
            client.search({
              index: 'myindex',

            }).then(function (resp) {
                $scope.tot = resp.hits.total;
            }, function (err) {
                console.trace(err.message);
            });
        };
        es();

    });

    function MyProvider(Private) {
        ...
    }

    require('ui/registry/vis_types').register(MyProvider);

    return MyProvider;
});
</code></pre>

<p><code>public/clock.html</code></p>

<pre><code>&lt;div class="clockVis" ng-controller="MyController"&gt;
     {{ time | date:vis.params.format }}
     {{tot}}
&lt;/div&gt;
</code></pre>

<p>Thank you for reading.</p>