Kibana Vis Not working

conversion.html

<div class="conversion-rate" ng-controller="ConversionRateController as cntrl">
  <div ng-if="cntrl.error" class="alert alert-danger">
    <p>{{cntrl.error}}</p>
  </div>

  Hello World

  <!-- d3 code here -->
  <pre>{{ data | json }}</pre>
  <!-- end d3 code -->
  
  <div id="lineChart">
    <visualize ng-if="cntrl.resp" vis="cntrl.vis" es-resp="cntrl.resp"></visualize>
  </div>
</div>

conversion.js

import 'plugins/conversion_rate/conversion.html';
import 'plugins/conversion_rate/conversion.less';
import 'plugins/conversion_rate/conversion_controller';

import VisTypes from 'ui/registry/vis_types';

VisTypes.register(ConvVisTypeProvider);

function ConvVisTypeProvider(Private) {
  const TemplateVisType = Private(require('ui/template_vis_type/TemplateVisType'));
  const Schemas = Private(require('ui/Vis/Schemas'));

  return new TemplateVisType({
    name: 'conversion',
    title: 'Conversion table',
    icon: 'fa-table',
    description: 'Conversion Table',
    template: require('plugins/conversion_rate/conversion.html'),
    schemas: new Schemas([
      {
        group: 'metrics',
        name: 'metric',
        title: 'Metric',
        min: 1,
        max: 1,
        defaults: [
          { type: 'count', schema: 'metric' }
        ]
      },
      {
        group: 'buckets',
        name: 'segment',
        title: 'X-Axis',
        min: 1,
        max: 1,
        aggFilter: ['date_histogram']
      },
      {
        group: 'buckets',
        name: 'terms',
        title: 'Split Lines',
        min: 1,
        max: 1,
        defaults: {
          type: 'terms',
          schema: 'group',
          field: 'tags',
          size: 200,
          order: 'desc',
          orderBy: '1'
        }
      }
    ])
  });
}

export default ConvVisTypeProvider;

conversion_controller.js

import uiModules from 'ui/modules';

import VisTypeProvider from 'ui/registry/vis_types';
import VisProvider from 'ui/Vis';

import TabifyAggResponse from 'ui/agg_response/tabify/tabify';

uiModules
.get('conversion_rate/conversion', ['kibana'])
.controller('ConversionRateController', function (Private, indexPatterns, timefilter, courier, $scope, $element) {
  let tabifyAggResponse = Private(TabifyAggResponse);

  $scope.build = function (data) {
    $scope.data = data;
  };

  $scope.$watch('esResponse', function (resp) {
    if (resp) {
      $scope.build(tabifyAggResponse($scope.vis, resp));
      $scope.showGraph();
    }
  });

  this.indexPattern = indexPatterns.get('beaconsindex');

  let visTypes = Private(VisTypeProvider);
  let Vis = Private(VisProvider);

  this.vis = new Vis(this.indexPattern, {
    type: visTypes.byName.line,
    aggs: [
      {
        id: '1',
        type: 'count',
        schema: 'metric',
        params: {}
      },
      {
        id: '2',
        type: 'date_histogram',
        schema: 'segment',
        params: {
          field: 'datetime',
          interval: 'auto',
          customInterval: '2h',
          'min_doc_count': 1,
          'extended_bounds': {}
        }
      },
      {
        id: '3',
        type: 'terms',
        schema: 'group',
        params: {
          field: 'tags',
          size: 5,
          order: 'desc',
          orderBy: '1'
        }
      }
    ],
  }, {});

  this.searchSource = new courier.SearchSource()
  .set('index', self.indexPattern)
  .set('size', 0)
  .set('aggs', () => {
    // rather than pass in the dsl when creating the
    // searchSource, we pass a function that will be called
    // per request to create the dsl. This way, we can change things
    // based on the environment in which we a exectuing the query

    this.vis.requesting(); // see https://github.com/elastic/kibana/issues/4264
    return this.vis.aggs.toDsl();
  });

  // handle when the searchsource gets a response, set it on the controller
  this.searchSource
  .onResults(resp => {
    this.error = null;
    this.resp = resp;
  });

  // also handle request failures
  this.searchSource.onError(err => {
    this.error = err.message;
    this.resp = null;
  });

  // enable the time filter
  timefilter.enabled = true;

  // tell the searchsource to update when the timefilter changes
  $scope.$listen(timefilter, 'fetch', () => {
    this.searchSource.fetch();
  });
});

js.err

angular.js:12477 TypeError: Cannot read property 'render' of null
    at Object.<anonymous> (visualize.js:152)
    at Object.fn (visualize.js:84)
    at Scope.$digest (angular.js:15826)
    at Scope.$apply (angular.js:16097)
    at done (angular.js:10546)
    at completeRequest (angular.js:10744)
    at XMLHttpRequest.requestLoaded (angular.js:10685)

js2.err

angular.js:12477TypeError: Cannot read property 'byName' of undefined
    at FieldAggParamFactory.FieldAggParam.deserialize (http://localhost:5601/bundles/kibana.bundle.js?v=8467:85695:53)
    at http://localhost:5601/bundles/kibana.bundle.js?v=8467:91295:29
    at Array.forEach (native)
    at AggConfigFactory.AggConfig.fillDefaults (http://localhost:5601/bundles/kibana.bundle.js?v=8467:91273:28)
    at new AggConfig (http://localhost:5601/bundles/kibana.bundle.js?v=8467:91187:13)
    at http://localhost:5601/bundles/kibana.bundle.js?v=8467:91882:19
    at Array.map (native)
    at new AggConfigs (http://localhost:5601/bundles/kibana.bundle.js?v=8467:91880:35)
    at VisFactory.Vis.setState (http://localhost:5601/bundles/kibana.bundle.js?v=8467:85151:20)
    at new Vis (http://localhost:5601/bundles/kibana.bundle.js?v=8467:85099:13)(anonymous function) @ angular.js:12477