Visualization directive for a histogram

[jordyd]

I'm making my own plugin for Kibana. In my plugin I want to use a visualization to display some data in a histogram. I followed the tutorial on https://www.elastic.co/blog/developing-new-kibana-visualizations, where it showed how to create a tagcloud in a plugin. I was able to get this to work but when I change this to a histogram I get the error: 'flattenDataObjUtilService expects an object with a series, rows, or columns key'. I don't know how the data should be written inside the myVisData. I need it to show a range of variables on the Y axis and the date range on the X. If someone could give me an example, that would be really helpful.

const visConfig = {
    type: 'histogram'
  };

$scope.myVisData = {
    tables: [{
      columns: [
        { title: 'Tag' },
        { title: 'Count' }
      ],
      rows: [
        [ 'test', 100 ],
        [ 'tag', 150 ],
        [ 'for', 200 ],
        [ 'tagcloud', 10 ],
      ]
    }]
  };

const Vis = Private(VisProvider);
$scope.myVis = new Vis('logstash-*', visConfig);

[Stacey_Gammon]

This is how the visData is structured for a vertical bar chart. Maybe if you set up your data similarly it'll work?

[jordyd]

Thanks for the answer. I got it to work but now when I hover over a bar, I get a 'Uncaught TypeError: self.formatter is not a function' error. I'm guessing that a certain setting is missing to fix or disable the hover.

$scope.myVisData = {
   series: [{
        aggId:"1",
        aggLabel:"Root Errors",
        label:"Root Errors",
        values: [
         { x: 1521654330000, y: 1},
         { x: 1521654360000, y: 5},
         { x: 1521654390000, y: 2},
         { x: 1521654320000, y: 4}
        ]
      }
      ]
    };